Home Salesforce View S3 File in Lightning Web Component

View S3 File in Lightning Web Component

by Dhanik Lal Sahni
SalesforceCodex - View S3 File

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

  1. Upload S3 SDK JS library
  2. Create Apex Class to get file information
  3. 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)

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



Related Posts

Download S3 File using AWS Signature Version 4.0

AWS Signature 4 Signing in Salesforce

Use Named Credential to Upload File in S3

You may also like


Win July 31, 2020 - 1:26 pm

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.

Dhanik Lal Sahni July 31, 2020 - 9:33 pm

docUrl is used in the template. isOpened is unused so removed from code.

Thank You,

Win August 1, 2020 - 7:09 pm

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”.

Dhanik Lal Sahni August 1, 2020 - 9:28 pm

That is resolved now. Thank you!


Hareesh November 16, 2020 - 7:49 am

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 ?

Dhanik Lal Sahni November 17, 2020 - 9:29 am

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,

Tanuja April 29, 2021 - 4:53 pm

Hi Dhanik,
when is this function processFiles is called? am getting error uncaught error on aws.confg.

Dhanik Lal Sahni December 7, 2021 - 1:17 pm

Hey Tanuja,
This is called when page is loaded and file url is available to show using wire method.

Thank You,

Omar May 11, 2021 - 5:24 am

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?

Dhanik Lal Sahni May 18, 2021 - 5:18 pm

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,

Download S3 File using AWS Signature Version 4.0 August 5, 2021 - 7:22 pm

[…] View S3 File in Lightning Web Component […]

Geecel Ginez March 29, 2022 - 1:59 pm

Hello can we view the S3 file using the link we stored in FileStore__c -> S3ServerUrl__c?

Dharmendra October 20, 2023 - 9:37 am

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;
accessKeyId: “your acess key”,
secretAccessKey: “your secret key”,
region_config: “eu-west-2”

Dhanik Lal Sahni October 28, 2023 - 11:31 pm

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,


Leave a Comment