upload file using lightning sfdmconkey

Custom File Upload In Salesforce Lightning Component – Upload Large Attachments

Lightning Component

Hey Guys,

Today in this post we are going to learn about how to create a custom file upload salesforce lightning component. This post inspire and new updated version of ‘Peter Knolle‘ post ‘upload file component’.

For this post we are using the chunk file upload method, by this chunk file upload method we can upload large file attachments within the heap size limitation, we are using the small 750kb chunks for upload our attachment.

Using this sample code you can upload attachments upto 4.5 Mb.
Lightning Component Output Sample : 

upload file using lightning sfdmconkey

Now let’s start code …

Step 1 : Create Apex Controller : FileUploadController.apxc

From Developer Console >> File >> New >> Apex Class

  • see code comments.
Step 2 : Create Lightning Component: fileUpload.cmp 

From Developer Console >> File >> New >> Lightning Component

  • In the above lightning component on line number 10, we have a attribute called ‘parentId’ , in this attribute you have need to set the parent id, in in sample i am using the account id.
  • see code comments.

you can select or drag your file in this lightning component

JavaScript Controller : fileUploadController.js

JavaScript Helper : fileUploadHelper.js

  • see code comments.
From developer console >> file >> new >> Lightning Application
demo.app [Lightning Application]


upload file using lightning sfdmconkey

Related Resource:

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂

(Visited 15,318 times, 64 visits today)


  • Hi Friends,

    I have one doubt, I am using document object for profile pictures it is not allowing more than 1 Mb file in side the Salesforce. I want to increase capacity from 1 Mb to 4 Mb please tell how can I achieve that.

    Here given below link which I am using for picture upload.



    Please help me where I need to do changes for 4 Mb file uploading


    Thanks in Advance.





  • Hi Team,

    What is the maximum file size that we can upload?

    I have tried and observed that we can upload only maximum of 4.5MB file, As there is an exception being thrown from apex i.e. Heap Exception on string value is crossing 6MB.

    Is there any other alternative way that we can upload file of more than 5MB?



  • Absolutly right. From Apex you can upload only 4.5 Mb attachments. It depends on heap size limit for String class (6Mb). Because we using base64 encoding we will take only 6*0.75=4.5Mb. But If you can upload file from 3-party server this size will grow. I want tell about Rest API. For Attachment limit is 25Mb. If you choise Document you can upload up to 2Gb. If you choise other Object with Blob field it is only 500Mb.

  • Hi Guys,

    The above code is not working for me. I mean it is not throwing any exception at the same time all the time the spinner is rendering and attachment also not get created in Salesforce.

    Please let me know. Thanks!

  • Hi Team,

    The above code is not working for me. When I have upload a image all the time spinner is rendering and image also not inserting in side the salesforce. Please let me know. Thanks!

    • Update the ParentId from the code above to the object ID to which you want to save the attachment and it should work. Thanks.

  • Hi Everyone,

    Can you help me to use this component to upload attachment before saving the record.
    The scenario is the user has to upload the document while creating the record.

  • I updated all classes from parentId to caseId. But i get an error on line 27 “Variable does not exist: caseId”

  • How can I pass a flow variable into the controller where you have hard coded the account id? Please help me, I am stuck at this point.

  • Hi Piyush,


    Could you please help me, I want to replace parentId with the dynamic caseid from my flow. How can I accomplish this to pass flow output variable to this lightning component.



    Chetan Bhatla


    • I got it working, getting a flow variable into this lighning component. Thanks for this amazing article. this solved my problem of attaching a file with the case by community guest user who does not have Edit access on case object.

      Thanks Again.

  • Hello,

    You can include a attribute called as accept in the lightning:input tag. By this way you can restrict the types of attachments that can be uploaded. Also you can specify if you need to access the camera on a smatrphone or a tablet using the salesforce1 app or also if salesforce is opened from a mobile browser. This is a very good use case for service engineers to capture images on the go and upload it to any record.


  •  private static void appendToFile(Id fileId, String base64Data) {
            base64Data = EncodingUtil.urlDecode(base64Data, ‘UTF-8’);

            Attachment a = [
                SELECT Id, Body
                FROM Attachment
                WHERE Id =: fileId

            String existingBody = EncodingUtil.base64Encode(a.Body);

            a.Body = EncodingUtil.base64Decode(existingBody + base64Data);

            update a;
     hi piyush i need test class for this method could you please provide if possible…thanks

Leave a Reply