1
  • We are attempting to use an installed package to access Amazon S3 - AWS SDK

  • This package created an Apex Class: S3

  • Our Named Credential was created using the information specified in the link above, and keys created from our Amazon S3 Account.

enter image description here

  • We added the package to the VisualForce page under 'Version Settings'

enter image description here

  • The VF Page can be saved without a controller, but when Previewing the page, we run into this error message: Uncaught Syntax Error: Unexpected Identifier at line 75.

  • Line 75 is:

AWS.S3.PutObjectRequest request = new AWS.S3.PutObjectRequest();
  • When viewing the installed package, I can see PutObjectRequest method in S3 Apex Class (see images below)

enter image description here enter image description here

  • When I try to add controller="S3" to the page tag, I receive an error - Error: Apex class 'S3' does not exist

  • We've even tried setting the controller equal to "AWS.S3" but run into this error - Error: Constructor is not visible: [AWS.S3]()

  • Here is our VF Page Code

<apex:page standardStyleSheets="false" showHeader="false" sidebar="false">
<apex:stylesheet value="{!$Resource.styleForImageUpload}"/>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.839.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
//Bucket Configurations
var bucketName = "salesforce-simplyhome-images";
function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  for(var i=0; i<colCount; i++) {
    var newRow = row.insertCell(i);
    newRow.innerHTML = table.rows[0].cells[i].innerHTML;
    newRow.childNodes[0].value = "";
  }
}
function deleteRow(row) {
  var table = document.getElementById("data");
  var rowCount = table.rows.length;
  if (rowCount > 1) {
    var rowIndex = row.parentNode.parentNode.rowIndex;
    document.getElementById("data").deleteRow(rowIndex);
  }
  else {
    alert("Please specify at least one value.");
  }
}
async function s3upload() {
  var uniqueId,
  element = document.getElementById("uniqueId").value;
  if (element != "") {
      uniqueId = element;
  }
  else {
       alert("Please specify a Unique ID. This has been emailed to you.");
       return;
  }
  var updatedFileName = document.getElementsByClassName("updatedFileName");  
  var files = document.getElementsByClassName("uploadFile");
  function toArray(arr) {
    return [].slice.call(arr);
  }
  var files_arr = toArray(files).filter(v => v.files[0] != null);
  var actual_files = new Array();
  var errors_arr = new Array();
  files_arr.forEach(function callback(file_obj,i){
    actual_files[i] = file_obj.files[0]
  })   
  var updated_file_names_arr = toArray(updatedFileName);
  var image_count = actual_files.length;
  var final_image_index = image_count-1;
  var success_count = 0;
  var error_count = 0;
  var final_message = "";
  for ( var i = 0; i <= final_image_index; i++ ) {
    var file = actual_files[i];
    var fileName = updatedFileName[i].value; 
    var filePath = uniqueId + '/' + fileName + '.txt';
    var fileUrl = 'https://' + bucketRegion + '.amazonaws.com/' + uniqueId + '/' +  filePath;
    var params = { Body: file, Key: filePath };
      try { 
      AWS.S3.PutObjectRequest request = new AWS.S3.PutObjectRequest();
      request.url = fileUrl;
      request.body = Blob.valueOf('test_body');
      AWS.S3.PutObjectResponse response = new AWS.S3.PutObject().call(request);
      console.log(response)
    };
  };
};
</script>
<br></br><br></br><br></br>
<div id="main">
  <h1>Please Upload Home Images</h1>
  <table id="header" class="data-table data-table-horizontal data-table-highlight">
    <tbody>
      <tr>
        <td> Please Enter Unique ID (Emailed to you)</td>
        <td> <input type="text" id="uniqueId" value="" placeholder="Enter Unique ID" required="true"/></td>
        <td></td>
     </tr>
    </tbody>
  </table>
  <table id="data" class="data-table data-table-horizontal data-table-highlight">
    <tbody>
      <tr>
        <td><input type="file" class="uploadFile" value="false"/></td>
        <td><input type="text" placeholder="Image of what?" class="updatedFileName"/></td>
 <td><a type="button" value="Delete" onclick="deleteRow(this)"><i class="fa fa-trash-o fa-fw"></i></a></td>      
 </tr>
      <tr>
        <td><input type="file" class="uploadFile" value="false"/></td>
        <td><input type="text" placeholder="Image of what?" class="updatedFileName"/></td>
 <td><a type="button" value="Delete" onclick="deleteRow(this)"><i class="fa fa-trash-o fa-fw"></i></a></td>      </tr>
      <tr>
        <td><input type="file" class="uploadFile" value="false"/></td>
        <td><input type="text" placeholder="Image of what?" class="updatedFileName"/></td>
 <td><a type="button" value="Delete" onclick="deleteRow(this)"><i class="fa fa-trash-o fa-fw"></i></a></td>      </tr>
      <tr>
        <td><input type="file" class="uploadFile" value="false"/></td>
        <td><input type="text" placeholder="Image of what?" class="updatedFileName"/></td>
 <td><a type="button" value="Delete" onclick="deleteRow(this)"><i class="fa fa-trash-o fa-fw"></i></a></td>      </tr>
      </tbody>
  </table>
  <table>    
  <tr>
  <div class="pull-right">
    <input type="button" value="Add" class="top-buffer" onclick="addRow('data')" />
  </div>
  </tr>
  <tr>
      <div class="pull-center">
<input type="button" class="top-buffer" value="Submit All Images" onclick="s3upload()"/>
    </div>
  </tr>
  <tr>
    <progress id="progress" max='100' value='0'></progress>
  </tr>
  </table>
  </div>
  </apex:page>

Is someone able to assist us in fixing this issue so we can connect with S3?

1 Answer 1

1

It looks like you're trying to call Apex methods directly from javascript in your s3upload method in the visualforce page. This isn't going to work in this context.

You can't add S3 as the controller/extension to your visualforce page, because the S3 class isn't a visualforce controller extension.

The code snippets provided in the repo are Apex code samples. I would suggest to get this working as you're expecting, you're going to have to write your own controller extension class that wraps the AWS.S3 functionality and then use whatever visualforce technology (remoting perhaps?) there is to call Apex methods from javascript functions.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .