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.
- We added the package to the VisualForce page under 'Version Settings'
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)
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?
