Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • The Ultimate Guide to Data Cleanup Techniques for Salesforce
    • How to Leverage Model Context Protocol (MCP) to Enhance Salesforce AI
    • Top Mistakes Developers Make in Salesforce Apex Triggers
    • Introducing Agentforce3 to Salesforce Developers
    • The Ultimate Guide to Apex Order of Execution for Developers
    • How to Handle Bulkification in Apex with Real-World Use Cases
    • How to Confidently Manage Transactions in Salesforce Apex
    • Building a Dynamic Tree Grid in Lightning Web Component
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Saturday, August 2
    • Home
    • Salesforce Platform
      • Architecture
      • Apex
      • Lightning Web Components
      • Integration
      • Flows & Automation
      • Best Practices
      • Questions
      • News
      • Books Testimonial
    • Industries
      • Artificial Intelligence
    • Hire Me
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Downloads
      • Salesforce Release Notes
      • Apex Coding Guidelines
    • About Us
      • Privacy Policy
    • Contact Us
    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 Sahni6 Mins Read

    How to Leverage Model Context Protocol (MCP) to Enhance Salesforce AI

    July 28, 2025
    By Dhanik Lal Sahni7 Mins Read

    Top Mistakes Developers Make in Salesforce Apex Triggers

    July 25, 2025
    By Dhanik Lal Sahni14 Mins Read

    The Ultimate Guide to Apex Order of Execution for Developers

    July 20, 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
    SFBenTopDeveloper
    Ranked #4 Salesforce Developer Blog by ApexHours.com
    ApexHoursTopDevelopers
    Categories
    Archives
    Tags
    apex (116) apex best practices (5) apex code best practice (10) apex code optimization (6) Apex logging (4) apex rest (11) apex trigger best practices (6) architecture (22) Asynchronous apex (9) AWS (5) batch apex (10) best code practice (4) code optimization (9) custom metadata types (5) design principle (9) flow (16) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (66) lightning-combobox (5) lightning-datatable (10) lightning component (32) Lightning web component (64) lwc (53) named credential (8) news (4) optimize apex (5) optimize apex code (6) optimize apex trigger (5) Permission set (4) Queueable (9) queueable apex (4) rest api (23) salesforce (150) salesforce apex (52) salesforce api integration (5) Salesforce Interview Question (5) 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

    MailChimp

    Expert Salesforce Developer and Architect
    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • The Ultimate Guide to Data Cleanup Techniques for Salesforce
    • How to Leverage Model Context Protocol (MCP) to Enhance Salesforce AI
    • Top Mistakes Developers Make in Salesforce Apex Triggers
    • Introducing Agentforce3 to Salesforce Developers
    • The Ultimate Guide to Apex Order of Execution for Developers
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • Top 10 Salesforce CRM Trends to Watch in 2025 July 18, 2025
    • Discover the Top 10 Salesforce AppExchange Apps to Boost Productivity July 10, 2025
    • 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
    Archives
    Categories
    Tags
    apex (116) apex best practices (5) apex code best practice (10) apex code optimization (6) Apex logging (4) apex rest (11) apex trigger best practices (6) architecture (22) Asynchronous apex (9) AWS (5) batch apex (10) best code practice (4) code optimization (9) custom metadata types (5) design principle (9) flow (16) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (66) lightning-combobox (5) lightning-datatable (10) lightning component (32) Lightning web component (64) lwc (53) named credential (8) news (4) optimize apex (5) optimize apex code (6) optimize apex trigger (5) Permission set (4) Queueable (9) queueable apex (4) rest api (23) salesforce (150) salesforce apex (52) salesforce api integration (5) Salesforce Interview Question (5) 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.