Upload File in Chunks/multi-parts with remove button in LWC

When working with large file uploads, sometimes it takes much time to upload the big files. Resulting, heap size error or CPU time limit error may occur. Also, you have no idea how much part of the file is uploaded. With the help of this code, you can upload the File in Chunks easily and can also customize the Chunk size. I have also added the progress bar indicator so you can see the file upload progress. Also, you can’t see or remove the files which are uploaded in the standard Lightning-input, you need to refresh back your page to remove the uploaded files. With the help of this code, you can remove the uploaded file easily. You can see the uploaded file name as well.

Component Features:
  • Upload file in Chunks
  • Uploaded file names will be visible below file upload.
  • Ability to remove uploaded files.
  • Customize your Chunk size as per need.
  • Progress Bar indicator for File Upload Progress.
Component Preview:

file-upload-in-chunk-lwc-cafeforce

 

 

file-upload-chunk-lwc2 file-upload-chunk-lwc3 file-upload-chunk-lwc4

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. We will only create the Content Version record the first time. For next time, we will query that record and append the remaining file chunk and update back.

 

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

 

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

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

Markup for fileUploadChunk.cmp

 

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

 

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

If the 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 metafile.

 

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.

 

Customize the Chunk Size:

You can set your own Chunk Size at Line Number 6 of the JS File.

 

Also Check:

For any queries or suggestions, comment below.

Cheers … Happy Coding … 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments