Lightning File Upload in LWC without writing Apex | Salesforce

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

lightning file upload button upload multiple files by dropping them

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:

Now open the JS file and paste the below code:

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.

 

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.

uploaded files list

 

On clicking done, you will see a Toast message as well. You can easily perform file upload in LWC now.

toast message after file upload

 

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.

PARAMETERTYPEDESCRIPTION
filesobjectThe 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 … 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments