Upload Multiple Files with File Remove button – LWC

Salesforce doesn’t give direct uploading of files into your SF library using lightning-input. Also, you can’t see or remove the files which are uploaded, you need to refresh back your page. With the help of this code, you can upload and remove the uploaded files easily. You can see uploaded files names as well. For each file you upload, its name will be visible with a cross icon to remove the file.

Component Features:
  • Upload multiple files at once
  • Uploaded file names will be visible below file upload.
  • Ability to remove uploaded files.
Component Preview:

lwc-multiple-file-upload-remove

file-upload-multiple-lwc1    multi-file-upload-lwc2

 

Step-1: Create an Apex controller

We need to create an Apex class first which will take our file data and create Content Version and Content Link records. Note that the Content Document record will be created automatically when you create a Content Version record.

 

Now create FileUploadMultiController.cls Apex class and paste the below code.

 

Step-2: Now we will create the fileUploadMultiLWC Lightning Web Component.

For creating a new Lightning Web Component, use any IDE like VS Code.

Markup for fileUploadMultiLWC.cmp

 

Now open the javascript file fileUploadMultiLWC.js and paste the below code.

 

Now finally paste the CSS in the fileUploadMultiLWC.css file.

If CSS file doesn’t exist. Right-click on the LWC component folder and click on create new File. Name it fileUploadLWC.css

 

Now, if you want to add this component to your Record Detail Page, add the below code to your component meta file.

 

Step-3: Now we will call the component.

To see the output, go to your Record Detail page, click on the setting gear icon on top and click on Edit Page. Lightning App Builder will open, find your component in the left sidebar and drop it onto the screen. Activate and Save the page and click on the back button. Your component will be visible now the screen now.

multiple-file-upload-remove-file-lwc

 

Also Check:

For any queries or suggestions, comment below.

Cheers … Happy Coding … 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments