File upload to Amazon S3 from Salesforce LWC (without apex) - amazon-web-services

Question

I have tried create a LWC component which job is to upload a file in Amazom S3 bucket. I have configured AWS bucket perfectly test it upload a file by postman. But I could not file from LWC component. I was getting this error.
I am following this tutorial.
I have configured CSP Trusted Sites and CORS in salesforce.Images below:
Here is my code:
import { LightningElement, track, wire } from "lwc";
import { getRecord } from "lightning/uiRecordApi";
import { loadScript } from "lightning/platformResourceLoader";
import AWS_SDK from "#salesforce/resourceUrl/awsjssdk";
import getAWSCredential from '#salesforce/apex/CRM_AWSUtility.getAWSCredential';
export default class FileUploadComponentLWC extends LightningElement {
/*========= Start - variable declaration =========*/
s3; //store AWS S3 object
isAwsSdkInitialized = false; //flag to check if AWS SDK initialized
#track awsSettngRecordId; //store record id of custom metadata type where AWS configurations are stored
selectedFilesToUpload; //store selected file
#track showSpinner = false; //used for when to show spinner
#track fileName; //to display the selected file name
/*========= End - variable declaration =========*/
//Called after every render of the component. This lifecycle hook is specific to Lightning Web Components,
//it isn’t from the HTML custom elements specification.
renderedCallback() {
if (this.isAwsSdkInitialized) {
return;
}
Promise.all([loadScript(this, AWS_SDK)])
.then(() => {
//For demo, hard coded the Record Id. It can dynamically be passed the record id based upon use cases
// this.awsSettngRecordId = "m012v000000FMQJ";
})
.catch(error => {
console.error("error -> " + error);
});
}
//Using wire service getting AWS configuration from Custom Metadata type based upon record id passed
#wire(getAWSCredential)
awsConfigData({ error, data }) {
if (data) {
console.log('data: ',data)
let awsS3MetadataConf = {};
let currentData = data[0]
//console.log("AWS Conf ====> " + JSON.stringify(currentData));
awsS3MetadataConf = {
s3bucketName: currentData.Bucket_Name__c,
awsAccessKeyId: currentData.Access_Key__c,
awsSecretAccessKey: currentData.Secret_Key__c,
s3RegionName: 'us-east-1'
};
this.initializeAwsSdk(awsS3MetadataConf); //Initializing AWS SDK based upon configuration data
} else if (error) {
console.error("error ====> " + JSON.stringify(error));
}
}
//Initializing AWS SDK
initializeAwsSdk(confData) {
const AWS = window.AWS;
AWS.config.update({
accessKeyId: confData.awsAccessKeyId, //Assigning access key id
secretAccessKey: confData.awsSecretAccessKey //Assigning secret access key
});
AWS.config.region = confData.s3RegionName; //Assigning region of S3 bucket
this.s3 = new AWS.S3({
apiVersion: "2006-03-01",
params: {
Bucket: confData.s3bucketName //Assigning S3 bucket name
}
});
console.log('S3: ',this.s3)
this.isAwsSdkInitialized = true;
}
//get the file name from user's selection
handleSelectedFiles(event) {
if (event.target.files.length > 0) {
this.selectedFilesToUpload = event.target.files[0];
this.fileName = event.target.files[0].name;
console.log("fileName ====> " + this.fileName);
}
}
//file upload to AWS S3 bucket
uploadToAWS() {
if (this.selectedFilesToUpload) {
console.log('uploadToAWS...')
this.showSpinner = true;
let objKey = this.selectedFilesToUpload.name
.replace(/\s+/g, "_") //each space character is being replaced with _
.toLowerCase();
console.log('objKey: ',objKey);
//starting file upload
this.s3.putObject(
{
Key: objKey,
ContentType: this.selectedFilesToUpload.type,
Body: this.selectedFilesToUpload,
ACL: "public-read"
},
err => {
if (err) {
this.showSpinner = false;
console.error(err);
} else {
this.showSpinner = false;
console.log("Success");
this.listS3Objects();
}
}
);
}
this.showSpinner = false;
console.log('uploadToAWS Finish...')
}
//listing all stored documents from S3 bucket
listS3Objects() {
console.log("AWS -> " + JSON.stringify(this.s3));
this.s3.listObjects((err, data) => {
if (err) {
console.log("Error listS3Objects", err);
} else {
console.log("Success listS3Objects", data);
}
});
}
}
Please help someone. Thank you advance.

Answer 1

Problem solved. We have found problem in AWS configuration.