How to develop custom File Uploader using Lightning Web Component?

on

|

views

and

comments

Hi #Ohana,

In this blog post, we will talk about how to develop a custom file Upload using Lightning Web Component.

We will create a Component that will upload the file under the file object instead of Attachment. The reason we are doing, Salesforce is deprecating the attachments.

We will use FileReader class of JavaScript to read the File and then send that to Salesforce.

We have designed the component which will sit inside the record page but if you want to use at different place then make the adjustment accordingly.

The main purpose of this component is to provide the ability to upload the Files even if you do not know the record Id and the record Id will be generated at run time.

Step 1 – Create the Apex Class

Step 2 – Create Lightning Web component

Get the code from the below file

Thanks for reading 🙂 #DeveloperGeeks #SalesforceDeveloper #SfdcPanther #AskPanther

Please do like share subscribe the SFDCPanther YouTube Channel.

Amit Singh
Amit Singhhttps://www.pantherschools.com/
Amit Singh aka @sfdcpanther/pantherschools, a Salesforce Technical Architect, Consultant with over 8+ years of experience in Salesforce technology. 21x Certified. Blogger, Speaker, and Instructor. DevSecOps Champion
Share this
3 out of 5

Leave a review

Excellent

SUBSCRIBE-US

Book a 1:1 Call

Must-read

How to Utilize Salesforce CLI sf (v2)

The Salesforce CLI is not just a tool; it’s the cornerstone of development on the Salesforce Platform. It’s your go-to for building, testing, deploying, and more. As one of the most important development tools in our ecosystem

Save the day of a Developer with Apex Log Analyzer

Table of Contents What is Apex Log Analyzer? Apex Log Analyzer, a tool designed with Salesforce developers in mind, is here to simplify and accelerate your...

Salesforce PodCast

Introduction Hey Everyone, Welcome to my podcast, the first-ever podcast in India for Salesforce professionals. Achievement We are happy to announce that we have been selected as Top...

Recent articles

More like this

27 COMMENTS

  1. Hello SFDC Panther. Amazing tutorial, it really helped me a lot!
    However I have one question. My requirement was to create a possibility for a user to upload up to 9MB file size. I’ve googled it a bit and find out that I needed async call for it (I used @future) on appendToFile method.
    However it doesn’t upload whole document. So if a document is 8.5 MB, it will once upload 7.5, and second time maybe 8.1 … you get the point. Do you know why this is happening and maybe you can give me some workaround on it?
    Thanks in advance and keep up the good work 🙂

  2. Hi SFDC Panther,

    I have a query for file upload function. If we are using file upload in a form, File is going to get uploaded before the form gets saved. Suppose, if the user changes mind to not click on submit and clicks clear, is there any way we can delete the form ?
    Any help will be much appreciated. Thanks in Advance

  3. Can I have this code on my email, I am in hurry and need to fix one functionality asap, Thanks in advance, One query I have a requirement to upload file upto 2GB which is saleaforce limit, will it be possible by this?

  4. Hi Sir,
    Its there in the Blog but I am not able to Copy it, also I need to upload the file upto 2GB(not 10 MB) and also I have to send it to apex(using chunking), Can you help me with any code snippet or blog.

    Regards:
    Arpit

    • The code is hosted in GitHub and to get the code you need to click on the View Raw button to see the code and use it. To upload the higher file of 2GB ( first thing if you will do your browser will be frozen after 30-40 MB size ). And if still want to upload then you have a Lighting-file upload standard lightning component which you can use.

  5. Hi,

    I have used this code for site user, earlier it worked. Now started giving no rows for assignment error .

    message: “List has no rows for assignment to SObject”
    stackTrace: “Class.FileUploadService.saveFiles: line 32, column 1\nClass.FileUploadService.saveTheChunkFile: line 8, column 1”

    I debugged and checked that Content version id is created still query is returning null.

    Regards,
    Nitin

  6. Is it possible to update the linked entity after save?
    I have a checkbox I would like to update on the linked record?
    I know this is probably a really simple thing to do but very new to Apex development.
    K

  7. Great work, I have one concern though, if the file size crosses 6MB wouldn’t we run into heapsize limit? Instead we can have a VF page embedded within the component and update the versiondata using post

  8. Hello SFDC Panther,
    I have created a LWC to upload file using Lightning file uploader, when we try to download or preview it, and downloaded file is not opening.
    Could you please help me to figure out what might be wrong
    It will be more helpful for me as I am new to salesforce.

    if you I can provide you my code

    Any help will be much appreciated
    Thanks in advance

    • It’s not possible for me to review the code as I have other things to do. However if you have large size files then it will not be displayed in the previewed. When are you downloading the file make sure it is using right extension to save.

  9. Hi Amit
    Could you please give insights about the file size and chunk size. I’m unable to find salesforce document which can help to understand why chunksize is chosen as 750 kb.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

versionData.VersionData = EncodingUtil.base64Decode(existingBody + base64Data); in Update at this line it is failing with String length exceeds maximum: 6000000 as it is one of the limits in apex, i didnt find any other way to update version dataHow to develop custom File Uploader using Lightning Web Component?
5/5

Stuck in coding limbo?

Our courses unlock your tech potential