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.