Amazon S3 Server is used to store Salesforce files. These stored files can be viewed later whenever is required.
This blog will explain how we can display file in iframe. Here are other blogs related to uploading and downloading files using lightning component to Amazon S3 server.
https://salesforcecodex.com/2020/01/download-files-from-s3-server-using-apex/ https://salesforcecodex.com/2020/01/uploading-files-to-s3-server-using-apex/Steps to create View S3 File component in LWC
- Upload S3 SDK JS library
- Create Apex Class to get file information
- Create Lightning Web Component to view S3 File
Let us see these steps in detail
1. Upload S3 SDK for JavaScript
Download AWS SDK file from https://raw.githubusercontent.com/aws/aws-sdk-js/master/dist/aws-sdk.min.js and upload this as static resource. You can put name AWSJSSDK for this static resource.
Add http://s3.amazonaws.com in remote site setting.
2. Create Apex Class to get file information
While uploading file to S3 Server, we store uploaded file’s S3 url in separate object. Let us take that object is FileStore where S3 file detail is stored.
Create apex class to get file information from FileStore.
3. Create Lightning Web Component to view S3 File
Let us create lightning web component to view file. It can take some time to get downloadable url from s3 file so create async javascript function to get file detail.
async function getSignedUrl(key) {
return new Promise((resolve, reject) => {
let params = {
Bucket: strBucket,
Key: strKey
};
s3.getSignedUrl('getObject', params, (err, url) => {
if (err) reject(err)
resolve(url);
})
});
}s3.getSignedUrl will call getObject method which will retrieves objects from Amazon S3. When it will get response from s3 server it will return data.
Complete LWC Code
References:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/
Related Posts
Download S3 File using AWS Signature Version 4.0
15 comments
Could you tell me the reason of using the variable “docURL” and “isOpened”? I don’t see these two variables haven’t referenced in anywhere.
docUrl is used in the template. isOpened is unused so removed from code.
Thank You,
Dhanik
Thank you for your reply. I saw “docURL” is used in template but “docURL” is only declaration in JS file. Any value wasn’t assigned to “docURL”.
That is resolved now. Thank you!
Regards
Dhanik
Hi Dhanik,
Thanks for sharing this, I am getting AWS error as below
PermanentRedirectThe bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this
Do we need configure anything else to solve this ?
Hello Hareesh,
Please check bucket information. Might be that is created in one region of AWS and you are referring other region. Like bucket is created in us-east-1 but you are referring to us-east-2 region.
Thank You,
Dhanik
Hi Dhanik,
when is this function processFiles is called? am getting error uncaught error on aws.confg.
Hey Tanuja,
This is called when page is loaded and file url is available to show using wire method.
Thank You,
Dhanik
Hi! thanks a lot, it works perfectly, but I have a question, is it secure to set the AWS keys as variables in the LWC, We can add them as a Custom setting and get them with an apex call, but they are secure as variables?
Hello Omar,
It is not secure to put any key in LWC component but when you directly calling any API from LWC then you have to put there. Securing any key can be done using Named credential, encrypted fields, protected custom setting and custom metadata (for packaged). You can also write your own logic to encrypt as well.
Thank You,
Dhanik
[…] View S3 File in Lightning Web Component […]
Hello can we view the S3 file using the link we stored in FileStore__c -> S3ServerUrl__c?
Hello Geecel,
You can check the blog https://salesforcecodex.com/salesforce/view-s3-file-in-lightning-web-component/ or https://salesforcecodex.com/salesforce/download-s3-file-using-aws-signature-version-4-0/ for this.
Thank You,
Dhanik
Hi Sahni,
Do you have any Idea, how can we secure below code in LWC componenet. anyone can see the accessKeyId and secretAccessKey by viewsource. That would be great if you have any specific fix for this.
const AWS = window.AWS;
AWS.config.update({
accessKeyId: “your acess key”,
secretAccessKey: “your secret key”,
region_config: “eu-west-2”
});
Hello Dharmendra,
If we are using keys in client side then it will be difficult to secure it. We should use server side file access if our application is being accessed by external users. You can restrict IP address for application access so that only required user can access application.
Thank You,
Dhanik