File Upload in Lightning Web Component(lwc)

File Upload in Lightning Web Component(lwc)

File Upload in Lightning Web Component(lwc)

lightning-file-upload component provides an easy and integrated way for users to upload multiple files. The file uploader includes drag-and-drop functionality and filtering by file types.

File uploads are always associated to a record, so the record-id attribute is required. Uploaded files are available in Files Home under the Owned by Me filter and on the record’s Attachments related list that’s on the record detail page. Although all file formats that are supported by Salesforce are allowed, you can restrict the file formats using the accept attribute.

lightning-file-upload component inherits styling from file selector in the Lightning Design System.

LWC file upload Example

fileUploadLWC.html

<template>
    <lightning-card title="LWC File Upload Example" icon-name="custom:custom19">
        <lightning-file-upload
            label="Attach receipt"
            name="fileUploader"
            accept={acceptedFormats}
            record-id={recordId}
            onuploadfinished={handleUploadFinished}
            multiple>
    </lightning-file-upload>
    </lightning-card>
</template>

fileUploadLWC.js

import { LightningElement, api } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class FileUploadLWC extends LightningElement {
    @api recordId;
    get acceptedFormats() {
        return ['.pdf', '.png','.jpg','.jpeg'];
    }
    handleUploadFinished(event) {
        // Get the list of uploaded files
        const uploadedFiles = event.detail.files;
        let uploadedFileNames = '';
        for(let i = 0; i < uploadedFiles.length; i++) {
            uploadedFileNames += uploadedFiles[i].name + ', ';
        }
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: uploadedFiles.length + ' Files uploaded Successfully: ' + uploadedFileNames,
                variant: 'success',
            }),
        );
    }
}

fileUploadLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now we can add this lwc component on the account detail page.

  • Go to one of account detail record
  • Click Setup (Gear Icon) and select Edit Page.
  • Under Custom Components, find your fileUploadLWC component and drag it on Account page.
  • Click Save and activate.

 

We will get the following output where the user will be able to upload multiple files on the account record.

File Upload in Lightning Web Component

 

Once the user will click on Done, user will see a success message.

LWC File Upload Success Message

File Upload Limits

By default, you can upload up to 10 files simultaneously unless your Salesforce admin has changed that limit. The org limit for the number of files simultaneously uploaded is a maximum of 25 files and a minimum of 1 file. The maximum file size you can upload is 2 GB. In Communities, the file size limits and types allowed follow the settings determined by community file moderation. By default, guest users can’t upload files. You can enable the org preference. Allow site guest users to upload files.

Usage Considerations

This component is not supported in Lightning Out or standalone apps, and displays as a disabled input. Additionally, if the Don’t allow HTML uploads as attachments or document records security setting is enabled for your organization, the file uploader cannot be used to upload files with the following file extensions: .htm, .html, .htt, .htx, .mhtm, .mhtml, .shtm, .shtml, .acgi, .svg.

For more details please refer to official link. This example is copied from this official link with small tweaks.

Permanent link to this article: https://www.sfdcpoint.com/salesforce/file-upload-in-lightning-web-component/

8 comments

Skip to comment form

    • Thom on July 16, 2020 at 12:19 am
    • Reply

    Good post. Thanks for posting it. I am interested in the error handling, particularly with messaging when a user tries to upload a file that is not allowed, based on the file extension. Can you respond with how you would implement that with this LWC?

    • kiran on August 26, 2020 at 1:12 pm
    • Reply

    Nice Article.Thanks. Can you explain how can show the uploaded files?

    • Ajit Nair on August 27, 2020 at 9:59 pm
    • Reply

    Hi Ankush,

    Can we restrict upload to 1 file with SFDC upload file component?

    Thanks,
    Ajit Nair

    Apttus

    • Srikanth on December 9, 2020 at 11:56 pm
    • Reply

    Hi Anukush,

    How to change the limit from 10 to 25?

    • Linda on April 22, 2021 at 11:15 am
    • Reply

    Would you please help me to solve the problem?
    How to download and upload the file for each line in the datatable?

    • Pratiksha on May 3, 2021 at 7:35 pm
    • Reply

    Helpful, THANK-YOU, but after uploading the file, it’s name is not reflecting on the upload component.

    • sachin on September 19, 2021 at 11:54 pm
    • Reply

    How can i upload a file to my custom Metadata, please explain?

    • Krishna on February 2, 2022 at 1:45 pm
    • Reply

    Hi, anyone able to modify the label “Upload Files”, tried all the suggested ways but didnt worked, please help

Leave a Reply

Your email address will not be published.