File upload to Amazon S3 from Salesforce LWC (without apex)

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.