Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • 10 Salesforce Chrome Extensions to Boost Your Productivity
    • How to Build a Generic Modal Window in Lightning Web Component
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    • Top 10 PMD Issues Salesforce Developers Should Focus on in Apex
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Saturday, June 7
    • Home
    • Architecture
    • Salesforce
      • News
      • Apex
      • Integration
      • Books Testimonial
    • Questions
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Integration Posts
    • Downloads
    • About Us
      • Privacy Policy
    SalesforceCodex
    Home»Salesforce»View S3 File in Lightning Web Component

    View S3 File in Lightning Web Component

    Dhanik Lal SahniBy Dhanik Lal SahniJuly 16, 2020Updated:January 15, 202515 Comments2 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    View S3 File in Lightning Web Component
    Share
    Facebook Twitter LinkedIn Pinterest Email

    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)
                        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

    AWS Signature 4 Signing in Salesforce

    Use Named Credential to Upload File in S3

    apex Lightning web component lwc S3 Server salesforce
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Previous ArticleHandle Component Error In Lightning Web Component
    Next Article Logo Recognition using Google Cloud Vision in Salesforce
    Dhanik Lal Sahni
    • Website
    • Facebook
    • X (Twitter)

    With over 18 years of experience in web-based application development, I specialize in Salesforce technology and its ecosystem. My journey has equipped me with expertise in a diverse range of technologies including .NET, .NET Core, MS Dynamics CRM, Azure, Oracle, and SQL Server. I am dedicated to staying at the forefront of technological advancements and continuously researching new developments in the Salesforce realm. My focus remains on leveraging technology to create innovative solutions that drive business success.

    Related Posts

    By Dhanik Lal Sahni9 Mins Read

    10 Salesforce Chrome Extensions to Boost Your Productivity

    June 1, 2025
    By Dhanik Lal Sahni4 Mins Read

    How to Build a Generic Modal Window in Lightning Web Component

    May 26, 2025
    By Dhanik Lal Sahni6 Mins Read

    Top 10 Salesforce Flow Features of Salesforce Summer ’25

    May 11, 2025
    View 15 Comments

    15 Comments

    1. Win on 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.

      Reply
      • Dhanik Lal Sahni on July 31, 2020 9:33 pm

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

        Thank You,
        Dhanik

        Reply
    2. Win on 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”.

      Reply
      • Dhanik Lal Sahni on August 1, 2020 9:28 pm

        That is resolved now. Thank you!

        Regards
        Dhanik

        Reply
    3. Hareesh on 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 ?

      Reply
      • Dhanik Lal Sahni on 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,
        Dhanik

        Reply
    4. Tanuja on April 29, 2021 4:53 pm

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

      Reply
      • Dhanik Lal Sahni on 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,
        Dhanik

        Reply
    5. Omar on 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?

      Reply
      • Dhanik Lal Sahni on 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,
        Dhanik

        Reply
    6. Pingback: Download S3 File using AWS Signature Version 4.0

    7. Geecel Ginez on March 29, 2022 1:59 pm

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

      Reply
      • Dhanik Lal Sahni on March 30, 2022 1:20 pm

        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

        Reply
    8. Dharmendra on 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;
      AWS.config.update({
      accessKeyId: “your acess key”,
      secretAccessKey: “your secret key”,
      region_config: “eu-west-2”
      });

      Reply
      • Dhanik Lal Sahni on 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,
        Dhanik

        Reply
    Leave A Reply Cancel Reply

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • 10 Salesforce Chrome Extensions to Boost Your Productivity
    • How to Build a Generic Modal Window in Lightning Web Component
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • Top 20 Salesforce Data Cloud Interview Questions & Answers for Admins June 5, 2025
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    Archives
    Categories
    Tags
    apex (111) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code analysis (3) code optimization (8) custom metadata types (5) design principle (9) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (65) lightning-combobox (5) lightning-datatable (10) lightning component (31) Lightning web component (63) lwc (52) named credential (8) news (4) optimize apex code (4) optimize apex trigger (3) Permission set (4) pmd (3) Queueable (9) rest api (23) S3 Server (4) salesforce (142) salesforce apex (47) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • 10 Salesforce Chrome Extensions to Boost Your Productivity
    • How to Build a Generic Modal Window in Lightning Web Component
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • Top 20 Salesforce Data Cloud Interview Questions & Answers for Admins June 5, 2025
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    Archives
    Categories
    Tags
    apex (111) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code analysis (3) code optimization (8) custom metadata types (5) design principle (9) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (65) lightning-combobox (5) lightning-datatable (10) lightning component (31) Lightning web component (63) lwc (52) named credential (8) news (4) optimize apex code (4) optimize apex trigger (3) Permission set (4) pmd (3) Queueable (9) rest api (23) S3 Server (4) salesforce (142) salesforce apex (47) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Facebook X (Twitter) Instagram Pinterest YouTube Tumblr LinkedIn Reddit Telegram
    © 2025 SalesforceCodex.com. Designed by Vagmine Cloud Solution.

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.