File uploading is a common use case and sometimes you want a custom upload button in your component which uploads files easily. The solution is Lightning File Upload in LWC. Lightning-file-upload is a native salesforce component and you can easily upload up to 10 files in it. The coolest feature of this component is that you don’t need to write a single line of Apex to insert records.
We all know how complicated it is to deal with Content Documents & Content Versions, and its other related objects. Reading data of file and sending it to Blob format by encoding it to Base64 is a fussy task. That might be useful where you have some feature dependency.
Component Feature & Limitations:
- You can upload up to 10 files simultaneously by default.
- The maximum file size you can upload is 2 GB.
- You can select multiple files or you can drop them.
- lightning-file-upload doesn’t support uploading multiple files at once on Android devices
To start, you first need to create a component in LWC. Here I’m creating lightningFileUpload component.
Now, open your component’s HTML file and paste the below code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <lightning-card title="Lightning File Upload"> <div class="slds-p-around_medium"> <lightning-file-upload label="Upload single/multiple files" name="fileUploader" accept={acceptedFormats} record-id={recordId} onuploadfinished={handleUploadFinished} multiple> </lightning-file-upload> </div> </lightning-card> </template> |
Now open the JS file and paste the below code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { LightningElement, api } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class LightningFileUpload extends LightningElement { @api recordId; get acceptedFormats() { return ['.png', '.PNG', '.jpg', '.JPG']; } handleUploadFinished(event) { const uploadedFiles = event.detail.files; this.showNotification(uploadedFiles.length + ' files are Uploaded Successfully', 'success'); } showNotification(message, variant) { const evt = new ShowToastEvent({ 'message': message, 'variant': variant }); this.dispatchEvent(evt); } } |
Finally, open the js-meta.xml file and paste the below code. With the help of the below code, your component will be visible on Lightning App Builder.
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>50.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle> |
Now, open any record detail page > on top, click setting gear > Click on Edit Page.
On the left pane, find your component and drop it onto the screen. Now Activate and Save your page and come back to the record detail page. If the component is not visible, refresh twice.
Now on your component, click on the ‘Upload Files’ button and select png or jpg image. You will see the SF native window showing upload file progress.
On clicking done, you will see a Toast message as well. You can easily perform file upload in LWC now.
Enable Guest Users to Upload Files
By default, guest users can’t upload files and don’t have access to objects and their associated records.
To enable guest users to upload files, enable the org preference Allow site guest users to upload files
. However, even if you enable this setting, guest users can’t upload files to a record unless guest user sharing rules are in place.
Upload Event
uploadfinished event fired when files are uploaded successfully.
The uploadfinished
event returns the following parameter.
PARAMETER | TYPE | DESCRIPTION |
---|---|---|
files | object | The list of files that are uploaded. |
event.detail.files
returns a list of uploaded files with the attributes name
and documentId
. If a guest user performed the file upload, the documentId
is not returned.
You can check out more information about it HERE.
Also Check:
For any queries or suggestions, comment below.
Cheers … Happy Coding … 🙂
How to restrict the number of files upload, can you please comment on this.
Hi Venkat,
There is no way you can handle the number of file uploads in this component. Alternately, you can write a trigger on the content version object to restrict the No of files upload per record.