You need to sign in to do that
Don't have an account?
NewSFDCDeveloper
How can we upload files to S3 from Lightning?
How can we upload files to S3 from Lightning?
function readOnly(count){ }
You need to sign in to do that
Don't have an account?
----------------------------------------
<lightning:input name="selectedFiles" type="file" label="" onchange="{!c.handleFilesChange}"/>
Add below code in JS Controller file
----------------------------------------
handleFilesChange: function(component, event, helper) {
component.set('v.showSpinner', true); //To show the spinner
var files = event.getSource().get("v.files");
var validationFailed = false;
for(var i=0;i < files.length;i++) {
if(files[i].name.length > 80){
helper.showToastMessage(component,event,$A.get("$Label.c.Error"), $A.get("$Label.c.LongFileName"),"error","dismissible"); //User your labels
validationFailed = true;
break;
}
}
if(!validationFailed) {
helper.uploadFiles(component, event, helper);
} else {
component.set('v.showSpinner', false);
}
},
Add below code in JS Helper file
----------------------------------------
uploadFiles: function(component, event, helper){
var files = event.getSource().get("v.files");
for(var i = 0; i< files.length; i++) {
var s3Response = {};
try{
var fd = new FormData();
var fileName = files[i].name;
var uploadFileName = component.get("v.recordId")+'-'+fileName.split(' ').join('_');
var encodedFileName = encodeURIComponent(uploadFileName);
s3Response.fileName = fileName;
fd.append('key', encodedFileName);
fd.append('AWSAccessKeyId', S3Settings.awsAccessKeyId);
fd.append('policy', S3Settings.policy);
fd.append('acl', 'public-read');
fd.append('signature', S3Settings.signedPolicy);
fd.append('file', files[i]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this && this.readyState === 4) {
s3Response.statusCode = this.status;
s3Response.statusText = this.statusText;
s3Response.responseText = this.responseText;
s3Response.fileURL = 'https://'+S3Settings.host+'/' + encodedFileName;
}
};
xhr.open('POST', 'https://'+S3Settings.host+'/', false);
xhr.setRequestHeader("X_FILENAME", fileName);
xhr.send(fd);
}
catch(e){
s3Response.error = e.message;
component.set('v.showSpinner', false);
//Need to create log
} finally {
//Add logic to save the path of files in an object
}
All Answers
----------------------------------------
<lightning:input name="selectedFiles" type="file" label="" onchange="{!c.handleFilesChange}"/>
Add below code in JS Controller file
----------------------------------------
handleFilesChange: function(component, event, helper) {
component.set('v.showSpinner', true); //To show the spinner
var files = event.getSource().get("v.files");
var validationFailed = false;
for(var i=0;i < files.length;i++) {
if(files[i].name.length > 80){
helper.showToastMessage(component,event,$A.get("$Label.c.Error"), $A.get("$Label.c.LongFileName"),"error","dismissible"); //User your labels
validationFailed = true;
break;
}
}
if(!validationFailed) {
helper.uploadFiles(component, event, helper);
} else {
component.set('v.showSpinner', false);
}
},
Add below code in JS Helper file
----------------------------------------
uploadFiles: function(component, event, helper){
var files = event.getSource().get("v.files");
for(var i = 0; i< files.length; i++) {
var s3Response = {};
try{
var fd = new FormData();
var fileName = files[i].name;
var uploadFileName = component.get("v.recordId")+'-'+fileName.split(' ').join('_');
var encodedFileName = encodeURIComponent(uploadFileName);
s3Response.fileName = fileName;
fd.append('key', encodedFileName);
fd.append('AWSAccessKeyId', S3Settings.awsAccessKeyId);
fd.append('policy', S3Settings.policy);
fd.append('acl', 'public-read');
fd.append('signature', S3Settings.signedPolicy);
fd.append('file', files[i]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this && this.readyState === 4) {
s3Response.statusCode = this.status;
s3Response.statusText = this.statusText;
s3Response.responseText = this.responseText;
s3Response.fileURL = 'https://'+S3Settings.host+'/' + encodedFileName;
}
};
xhr.open('POST', 'https://'+S3Settings.host+'/', false);
xhr.setRequestHeader("X_FILENAME", fileName);
xhr.send(fd);
}
catch(e){
s3Response.error = e.message;
component.set('v.showSpinner', false);
//Need to create log
} finally {
//Add logic to save the path of files in an object
}
I know this is a fairly old post, but I have tried to use this code as a guide, and I am getting a CORs error, even though I have set my CORs settings correctly in SF and AWS.
Here is my aura helper:
And also my APEX Controller
and finally an Apex helper that signs the policy.