File Upload Lightning Component

November 15, 2014November 23, 2014 Peter Knolle92 Comments

The Lightning Component Framework was introduced at Dreamforce ’14 as part of the collection of tools that represent a significant upgrade to the Salesforce1 Platform. Currently the components can be used in the Salesforce1 mobile app and standalone apps. In this article I detail a custom Lightning Component that allows a user to upload a file to Salesforce as a related Attachment record on a specified sObject record. The article starts off by showing a simple component that works for smaller files (< 1MB) and then builds on that with a component that works on larger files (~4.5 MB).

Component Summary

The component consists of the following:

fileUpload.cmp – The component definition – Basic markup and attribute definitions
fileUploadController.js – The controller – Hands off processing to helper
fileUploadHelper.js – The helper – Sets up call to Apex controller and handles result
fileUpload.css – The styles – Basic styles related to the spinner for uploading
FileController.cls – The ApexController – Creates the Attachment

The code of fileUpload.cmp, fileUploadHelper.js, and FileController.cls are shown in this article; however, all of the code is available on GitHub.

The component has some very, very basic styling since that is not the focus of this article. It first displays with a button to select a file and a save button. While saving it displays the spinner.

Component Code

The component markup is as follows:

<aura:component controller="paura.FileController">
    <aura:attribute name="parentId" type="Id"/>
    
    <aura:handler event="aura:waiting" action="{!c.waiting}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
    
    <div>
        <input type="file" class="file" aura:id="file" />
        <ui:button label="Save" press="{!c.save}"/>
        
        <div aura:id="uploading" class="notUploading">
            <img src="/resource/paura__images/loading-gray.gif" alt="uploading" class="small-spinner" /> Uploading...
    	</div>
    </div>
    
</aura:component>

<aura:component controller="paura.FileController">

<aura:attribute name="parentId" type="Id"/>

<aura:handler event="aura:waiting" action="{!c.waiting}"/>

<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>

<div>

<ui:button label="Save" press="{!c.save}"/>

<img src="/resource/paura__images/loading-gray.gif" alt="uploading" class="small-spinner" /> Uploading...

</div>

</aura:component>

The component accepts the Id of the related object as an attribute, contains a file input, save button, and spinner that is displayed when the file is being uploaded.

Note the use of the “aura:id” on the file input. Using “aura:id” is necessary to be able to use the component.find(“file”) method in the helper JavaScript to locate the file input. What’s very powerful here is that the input element is itself translated into a component by the framework and gets all of the benefits of being a component along with it.

The aura:waiting and aura:doneWaiting are events defined in the component markup and are fired by the framework when the component has invoked an Action that calls to the server and when the response is received, respectively. The controller actions that they invoke simply hide or show the spinner div by applying CSS.

Uploading

The controller’s save method is called when the save button is pressed. It delegates to the helper’s save method to handle the work.

({
    MAX_FILE_SIZE: 750 000, /* 1 000 000 * 3/4 to account for base64 */

    save : function(component) {
        var fileInput = component.find("file").getElement();
    	var file = fileInput.files[0];
   
        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +
    	          'Selected file size: ' + file.size);
    	    return;
        }
    
        var fr = new FileReader();
        
        var self = this;
       	fr.onload = function() {
            var fileContents = fr.result;
    	    var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

            fileContents = fileContents.substring(dataStart);
        
    	    self.upload(component, file, fileContents);
        };

        fr.readAsDataURL(file);
    },
        
    upload: function(component, file, fileContents) {
        var action = component.get("c.saveTheFile"); 

        action.setParams({
            parentId: component.get("v.parentId"),
            fileName: file.name,
            base64Data: encodeURIComponent(fileContents), 
            contentType: file.type
        });

        action.setCallback(this, function(a) {
            attachId = a.getReturnValue();
            console.log(attachId);
        });
            
        $A.run(function() {
            $A.enqueueAction(action); 
        });
    }
})

({

MAX_FILE_SIZE: 750 000, /* 1 000 000 * 3/4 to account for base64 */

save : function(component) {

var fileInput = component.find("file").getElement();

var file = fileInput.files[0];

if (file.size > this.MAX_FILE_SIZE) {

alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +

'Selected file size: ' + file.size);

return;

}

var fr = new FileReader();

var self = this;

fr.onload = function() {

var fileContents = fr.result;

var base64Mark = 'base64,';

var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

fileContents = fileContents.substring(dataStart);

self.upload(component, file, fileContents);

};

fr.readAsDataURL(file);

upload: function(component, file, fileContents) {

var action = component.get("c.saveTheFile");

action.setParams({

parentId: component.get("v.parentId"),

fileName: file.name,

base64Data: encodeURIComponent(fileContents),

contentType: file.type

});

action.setCallback(this, function(a) {

attachId = a.getReturnValue();

console.log(attachId);

});

$A.run(function() {

$A.enqueueAction(action);

});

}

})

The helper’s save function gets a reference to the action that represents the Apex controller’s saveTheFile method. Note that the name of the method (saveTheFile) on the Apex controller is different from the JavaScript controller (save). If they were both named “save”, then the call to component.get(“c.save”) would evaluate to a reference to the JavaScript’s save action, that would get called and infinite loop would result. Users are protected against the infinite loop and the result is actually an error overlay with a message “finishFiring has not completed after 15 loops”.

The save function reads the file using a FileReader and its readAsDataURL method. The readAsDataUrl method reads the file contents into a blob containing a data: URL. The maximum String size that can be sent to an @AuraEnabled Apex controller method appears to be 1,000,000, which is consistent with @Remote method limits. The MAX_FILE_SIZE takes into account the size increase due to Base64 encoding. It is necessary to URL encode the file contents prior to sending them to the server. This is done with the encodeURIComponent function.

The Apex controller simply takes the input, saves it in a Attachment and returns an Attachment Id. Since the data was URL encoded on the client the method decodes it with the EncodingUtil.urlDecode method.

public class FileController {
    
    @AuraEnabled
    public static Id saveTheFile(Id parentId, String fileName, String base64Data, String contentType) { 
        base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');
        
        Attachment a = new Attachment();
        a.parentId = parentId;

        a.Body = EncodingUtil.base64Decode(base64Data);
        a.Name = fileName;
        a.ContentType = contentType;
        
        insert a;
        
        return a.Id;
    }
}

public class FileController {

@AuraEnabled

public static Id saveTheFile(Id parentId, String fileName, String base64Data, String contentType) {

base64Data = EncodingUtil.urlDecode(base64Data, 'UTF-8');

Attachment a = new Attachment();

a.parentId = parentId;

a.Body = EncodingUtil.base64Decode(base64Data);

a.Name = fileName;

a.ContentType = contentType;

insert a;

return a.Id;

}

Larger Files

The above is a great start, but is limited by the small file size. Derek Lansing blogged, in this article, about a good way to handle larger files when uploading using @Remote methods that increases the allowed file size to about 4.3 MBs. That approach reads the file, and then sends it to the @Remote method in chunks that are under the limits. The Apex controller method then selects the Attachment out of the database on each successive iteration and updates its body.

Adapting the Lightning component to chunk the files, results in the following helper. Note that the component and the controller JS remain unchanged.

({
    MAX_FILE_SIZE: 4 500 000, /* 6 000 000 * 3/4 to account for base64 */
    CHUNK_SIZE: 950 000, /* Use a multiple of 4 */

    save : function(component) {
        var fileInput = component.find("file").getElement();
    	var file = fileInput.files[0];
   
        if (file.size > this.MAX_FILE_SIZE) {
            alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +
    		  'Selected file size: ' + file.size);
    	    return;
        }
        
        var fr = new FileReader();

        var self = this;
        fr.onload = function() {
            var fileContents = fr.result;
    	    var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

            fileContents = fileContents.substring(dataStart);
        
    	    self.upload(component, file, fileContents);
        };

        fr.readAsDataURL(file);
    },
        
    upload: function(component, file, fileContents) {
        var fromPos = 0;
        var toPos = Math.min(fileContents.length, fromPos + this.CHUNK_SIZE);
		
        // start with the initial chunk
        this.uploadChunk(component, file, fileContents, fromPos, toPos, '');   
    },
     
    uploadChunk : function(component, file, fileContents, fromPos, toPos, attachId) {
        var action = component.get("c.saveTheChunk"); 
        var chunk = fileContents.substring(fromPos, toPos);

        action.setParams({
            parentId: component.get("v.parentId"),
            fileName: file.name,
            base64Data: encodeURIComponent(chunk), 
            contentType: file.type,
            fileId: attachId
        });
       
        var self = this;
        action.setCallback(this, function(a) {
            attachId = a.getReturnValue();
            
            fromPos = toPos;
            toPos = Math.min(fileContents.length, fromPos + self.CHUNK_SIZE);    
            if (fromPos < toPos) {
            	self.uploadChunk(component, file, fileContents, fromPos, toPos, attachId);  
            }
        });
            
        $A.run(function() {
            $A.enqueueAction(action); 
        });
    }
})

({

MAX_FILE_SIZE: 4 500 000, /* 6 000 000 * 3/4 to account for base64 */

CHUNK_SIZE: 950 000, /* Use a multiple of 4 */

save : function(component) {

var fileInput = component.find("file").getElement();

var file = fileInput.files[0];

if (file.size > this.MAX_FILE_SIZE) {

alert('File size cannot exceed ' + this.MAX_FILE_SIZE + ' bytes.\n' +

'Selected file size: ' + file.size);

return;

}

var fr = new FileReader();

var self = this;

fr.onload = function() {

var fileContents = fr.result;

var base64Mark = 'base64,';

var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;

fileContents = fileContents.substring(dataStart);

self.upload(component, file, fileContents);

};

fr.readAsDataURL(file);

upload: function(component, file, fileContents) {

var fromPos = 0;

var toPos = Math.min(fileContents.length, fromPos + this.CHUNK_SIZE);

// start with the initial chunk

this.uploadChunk(component, file, fileContents, fromPos, toPos, '');

uploadChunk : function(component, file, fileContents, fromPos, toPos, attachId) {

var action = component.get("c.saveTheChunk");

var chunk = fileContents.substring(fromPos, toPos);

action.setParams({

parentId: component.get("v.parentId"),

fileName: file.name,

base64Data: encodeURIComponent(chunk),

contentType: file.type,

fileId: attachId

});

var self = this;

action.setCallback(this, function(a) {

attachId = a.getReturnValue();

fromPos = toPos;

toPos = Math.min(fileContents.length, fromPos + self.CHUNK_SIZE);

if (fromPos < toPos) {

self.uploadChunk(component, file, fileContents, fromPos, toPos, attachId);

}

});

$A.run(function() {

$A.enqueueAction(action);

});

}

})

In this version the Attachment’s Id is an additional parameter that is sent to the Apex controller. On the initial invocation the Attachment’s Id is not set. It is returned by the Apex controller and then retrieved in the helper with the a.getReturnValue() method call.

On successive calls the Apex controller performs an update. Below is the updated Apex controller.

public class FileController {
    
/** same saveTheFile implementation here **/
...
    
    @AuraEnabled
    public static Id saveTheChunk(Id parentId, String fileName, String base64Data, String contentType, String fileId) { 
        if (fileId == '') {
            fileId = saveTheFile(parentId, fileName, base64Data, contentType);
        } else {
            appendToFile(fileId, base64Data);
        }
        
        return Id.valueOf(fileId);
    }
    
    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;
    }
}

public class FileController {

/** same saveTheFile implementation here **/

...

@AuraEnabled

public static Id saveTheChunk(Id parentId, String fileName, String base64Data, String contentType, String fileId) {

if (fileId == '') {

fileId = saveTheFile(parentId, fileName, base64Data, contentType);

} else {

appendToFile(fileId, base64Data);

}

return Id.valueOf(fileId);

}

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;

}

In this article I detailed a simple Lightning component for uploading smaller files and expanded on it with a slightly more complex component to support larger files. To learn more about Lightning see Salesforce1 Lightning Developer page for a list of resources.

All of the code is available on GitHub.

92 thoughts on “File Upload Lightning Component”

Bob Buzzard says:

November 17, 2014 at 4:01 am

Great post. Have you found the upper limit of file size that can be uploaded using the second method? I’d expect heap space to be the gating factor myself, but curious as to your experience.

Reply
1. Peter Knolle says:
  
  November 17, 2014 at 6:41 pm
  
  Thank you! Glad you liked it.
  
  The upper bounds of the file size is related to the maximum String size of 6,000,000 characters which I think is related to the maximum heap size. Since the Apex controller concatenates Strings to build the body as soon as the base64 encoded concatenated body String exceeds 6,000,000 characters the following error is generated: FATAL_ERROR System.StringException: String length exceeds maximum: 6000000. The maximum heap size is 6MB, which is kind of equal to that. 😉
  
  The base64 encoding results in about a 33% increase in size (i.e., when the file is represented as a base64 string it is ~33% larger), so the upper bounds is about 3/4 * 6,000,000 = 4,500,000.
  
  Reply
  1. Chirag Mehta says:
    
    November 20, 2014 at 12:33 am
    
    Yes Its max heap size issue, I too had faced similar issue when uploading files using this fragment approach. On other note, great post .. that was lightning post on lightning 🙂
    
    Reply
  2. Juan says:
    
    November 17, 2015 at 2:15 pm
    
    Hi great post, I was using it as a guide for some development I need, but found that I reached the heap space limit, after 1MB of the file was sent. Did you had this kind of issue before? or any recommendatios I should keep in mind?
    
    Thanks
    
    Reply
    1. Ricky says:
      
      October 13, 2016 at 11:13 pm
      
      Helt ofa8;bart&#t230t. man finner inga ord.NÃ¥gon sa idag ”is the man insane or a psycopath?” Ja, du det kan man frÃ¥ga sig….Tack fÃ¶r kommentar inne hos mig!kram
      
      Reply
    2. santhosh says:
      
      April 1, 2019 at 8:45 am
      
      i too same issue Can u help me if urs completed
      
      Reply
  3. Rajan says:
    
    June 9, 2016 at 3:25 pm
    
    Thanks peter for script.
    With same code, i have tried to insert image into ContentVersion but getting same error “Apex heap size too large: 16227892” … Is there any way to avoid heap size error?
    
    Reply
2. Millicent says:
  
  October 13, 2016 at 11:37 pm
  
  let me think on it. i think having all these is neat (but a bit weird). i know there is a neat way to display them you just need to find the right person who can tell you. ruatnnhe has good ideas.
  
  Reply
3. simcity build it coins cheat says:
  
  February 24, 2017 at 12:43 pm
  
  Roligt att du gillade paketet 🙂 SjÃ¤lv vÃ¤ntar jag pÃ¥ mitt garn och te. Kanske kommer det idag, vem vet. Fin blogg du har, och vilka fina saker du har gjort!
  
  Reply
Pingback: Peter Knolle | Image Preview Lightning Component
Praveen says:

November 28, 2014 at 5:12 am

Nice post Pete.But When i tried to pass “parentId” as url parameter nothing happens ,instead of it used this way it works.Is there’s any way to pass parentid in component?

Reply
Ronen says:

December 8, 2014 at 10:28 am

Great Post. !

regarding the maximum String size of 6,000,000 , in what any other way can we upload file greater than 4.3M ?

I’m using javascript remoting, so in that case we are stuck…. hope for any guidance if you can

Ronen

Reply
Brian says:

May 12, 2015 at 4:17 pm

This is great and was a ton of help. I couldn’t find anything else on uploading files with Lightning. Is there a way to clear the selected file once it has been saved? I created an input form and I clear all the fields once it has been saved but I don’t know how to clear the file.
Thanks,
Brian

Reply
1. Alex Rozenfeld says:
  
  December 6, 2016 at 11:11 am
  
  Took me a little time to figure it out, I was going to refresh the whole component at first, however, it is fairly simple:
  
  component.find(“file”).getElement().value=”;
  
  This should work, where “file” is aura:id of input.
  
  Reply
Andrea says:

May 28, 2015 at 12:45 pm

hi,
Great post and clearly explained, thanks!
I ‘m working on a similar component and i’m currently having a hard time to make it work within the salesforce1 native app on ios. Have you tested this component on the native app?
thanks,
andrea

Reply
Lau Del says:

July 29, 2015 at 1:13 pm

Hi Peter,
Great code and thank you for sharing it.
I have implemented your code and it works fine but I am running into more severe Heap size issue than what you are describing.
This line:
a.Body = EncodingUtil.base64Decode(existingBody + base64Data);
seems to load the existing body twice in memory, once for a.Body and once for EncodingUtil.base64Decode(existingBody + base64Data) which makes the bigger file I can upload only around 1.5MB.

Have you encountered the same issue?

Reply
1. Tom says:
  
  September 12, 2017 at 6:01 am
  
  I got the same issue.
  
  Reply
Pingback: Create a Lightning Component for Drag-and-Drop Profile Pictures - Developer Relations
sushil says:

November 26, 2015 at 9:04 am

Hi Peter Knolle,

I have got file too long error in above code can you please help me because i am working on a similar component but that time i have got lot of problem in upload large amount of file.

Thanks

Reply
Cory Cowgill says:

January 26, 2016 at 3:35 pm

Great article. How about the reverse though when you want to download files? Some blogs have reference to the /servlet/servlet URL. However with Lightning not sure if URL’s are constant and that doesn’t seem to be a supported approach. I’ve worked through a couple ideas (base64 encode href, etc). What have you done?

Reply
1. Peter Knolle says:
  
  January 26, 2016 at 3:57 pm
  
  Thanks.
  I hadn’t tried it. I just looked and the standard Notes & Attachment related list uses the servlet/servlet URL. As long as you put it in a new window, I’m pretty sure it would work, e.g., <a target="_blank" href="/servlet/servlet.FileDownload?file=00P36000000R3TlEAK">get attachment</a>;. I am not aware of any URLFOR like functionality that we could leverage, though.
  
  Reply
raj says:

January 30, 2016 at 2:05 pm

Hi Peter,

I have tried your code for SF1 , file is not saving in proper format.Could you please provide me more options here?

Thanks
Raj

Reply
Salma says:

May 3, 2016 at 9:43 am

Hello ,
After trying this code i’m getting an error : Only functions are allowed in javascript controllers
when trying to save the javascript controller. COuld you please Help.

Reply
Rajan says:

June 2, 2016 at 11:22 pm

Hi Peter,

Can we use the same logic for ContentVersion as well? to upload big files in size?

Reply
1. Bakul says:
  
  June 6, 2016 at 11:41 pm
  
  Hi Rajan,
  Have you been able to get this component working?
  
  Bakul
  
  Reply
Bakul says:

June 6, 2016 at 1:26 pm

Hi,
I am trying this component and I am continuously getting error “TypeError: Cannot read property ‘0’ of undefined” at following line:

var file = fileInput.files[0];

Does anybody have suggestion?

Reply
1. Peter Knolle says:
  
  June 7, 2016 at 2:44 pm
  
  Hi Bakul. It looks like this will not work anymore with LockerService enabled. The files array isn’t available when LockerService is enabled. Sorry.
  
  Reply
  1. Keir Bowden says:
    
    June 8, 2016 at 4:30 am
    
    I’d raise this on Stack Exchange – there’s no reason why a component that manages a file input shouldn’t have access via the Files API. It could just be that it hasn’t been added to the secure DOM side of things yet.
    
    Reply
    1. Peter Knolle says:
      
      June 8, 2016 at 7:25 am
      
      Good idea. http://salesforce.stackexchange.com/questions/126166/how-to-access-the-filelist-array-for-file-inputs-in-lightning-components-with-lo.
      
      Reply
      1. Brian Piggins says:
        
        July 6, 2016 at 9:26 am
        
        Is there any indication that case 14030879 will be resolved before locker service is enabled for all orgs in Winter 17?
      2. Manish Nelekar says:
        
        April 27, 2017 at 6:38 am
        
        Thanks Peter for this component.
        To Make it locker compatible –
        If we use and make other locker changes like replace “$A.run(function() {” with “$A.getcallback” then it works with locker service.
        To Access file input you can use –
        var fileInput = component.find(“currFile”).get(“v.files”);
        var file = fileInput[0];
        rest code remains same and works fine
Taps says:

June 8, 2016 at 1:55 am

Hi Peter,

This is very useful post for uploading small files. But i want upload a large video file. Can you please guide me how can achieve to upload large file. ?

Reply
Pingback: Salesforce Lightning CLI - Peter Knolle
Harish says:

June 21, 2016 at 7:06 am

Hi Peter,

File upload code is not working after summer 16 release. Can you please provide any solution for same?

Reply
1. Doc says:
  
  October 13, 2016 at 11:46 pm
  
  Free again???? I am trying to not let trash envy take over me. It looks amazing. I am loving that really rustic, chippy look. It really looks genuinely old, not like someone diseersstd it to make it look old. Great work and thanks for the fun party. -K
  
  Reply
BB says:

August 21, 2016 at 3:08 am

Hi, Peter.
It takes more long time for uploading the file when I use base64encode, so
do you know some ways of using “URL.createObjectURL” instead of it.

please help me.

Reply
Ashok says:

August 29, 2016 at 10:20 am

Hello Peter,

Thanks for the article, nicely explained, have one quick question. FileReader and itsfuntion readAsDataURL are not working/supported when we activate ‘Enable Lightning LockerService Security for Communities’ critical update, this is going to get activated in Production on 2/11/2017 by default. Do you know any other hack or option to make file upload work with lightning components?

Thanks & Regards,
Ashok

Reply
Nicolas Vuillamy says:

September 11, 2016 at 5:11 pm

Hi Petar ,

Since LockerService activation, $A.run is not supported anymore and triggers a JS error.
SFDC doc says to replace it bu $A.enqueueAction , but unfortunately it enqueues the action but … doesn’t trigger it.

Do you have an idea about some solution / workaround ?

Many thanks

Reply
Nicolas Vuillamy says:

September 11, 2016 at 5:11 pm

Hi Peter ,

Since LockerService activation, $A.run is not supported anymore and triggers a JS error.
SFDC doc says to replace it bu $A.enqueueAction , but unfortunately it enqueues the action but … doesn’t trigger it.

Do you have an idea about some solution / workaround ?

Many thanks

Reply
Bhuvana says:

September 26, 2016 at 10:29 am

I implemented the same thing but it is taking too much of time to upload the file. Can you suggest me how can i reduce the upload time.

Reply
Benedikt Herudek says:

October 1, 2016 at 6:29 am

great post, am actually looking for a way to extend this to a dynamic upload for several files if the client desires too.

Something like this visualforce component in lightning with drag and drop

http://bobbuzzard.blogspot.nl/2011/01/uploading-multiple-attachments-via.html

any tips ?

Reply
Raj says:

October 21, 2016 at 4:24 pm

i am facing wiered problem – Filereader.onload is getting executed faster, and hence., the file is not getting loaded during the first time click of the button. But when i click for the second time, there are 2 attachments added. Any idea how to fix it?

Reply
1. Raj says:
  
  October 21, 2016 at 4:27 pm
  
  This is happening in desktop version – did not check in mobile / SF1.
  
  Reply
Nathan Strelow says:

November 14, 2016 at 5:55 pm

Hi Peter,

Thank you for the very helpful explanation. I implemented your solution and it works great for small files. However, when I try to load larger files (> 1 chunk) an error is thrown in the browser console: “Received exception event from server”. It looks like the issue has to do with the attachId value not being returned in the uploadChunk callback (or perhaps that is just a result of the error). I also checked the Force.com developer console and got an error: “FATAL_ERROR System.QueryException: List has no rows for assignment to SObject”, that I believe is related. Any ideas what may be going on?

Thanks in advance for your help!

Reply
Mathew says:

November 23, 2016 at 4:13 pm

Hi,

Sorry if this is a dumb question, but I copied off Git Hub, but when trying to add it as a component in a lightening app, I get the following error

“Action failed: c$fileUpload$controller$doneWaiting [component.find(…).getElement is not a function] Failing descriptor: {c$fileUpload$controller$doneWaiting}”

Any ideas?

Reply
1. CarnVanBeck says:
  
  January 24, 2017 at 11:12 am
  
  I’m facing the same problem, but only if I’m using an init event in my fileUpload component.
  After removing following line:
  
  it works.
  But I have no idea why.
  
  Reply
  1. CarnVanBeck says:
    
    January 24, 2017 at 11:13 am
    
    that’s the line
    aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”
    
    Reply
DEBADYUTI SIL says:

January 11, 2017 at 8:16 pm

Please vote for this idea to get a standard lightning component : https://success.salesforce.com/ideaView?id=0873A000000cNQtQAM

Reply
Muzammil Bajaria says:

January 23, 2017 at 1:14 am

HI Peter,

I am developing a lightning component to upload files in content version document. but i am facing some issue in uploading large file. Please refer to this link for details.

https://developer.salesforce.com/forums?communityId=09aF00000004HMGIA2#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Lightning&criteria=ALLQUESTIONS&id=9060G000000I30IQAS

Any kind of help will be greatful .

Reply
Muzammil Bajaria says:

January 23, 2017 at 4:35 am

HI Peter,
You have mentioned that “component that works on larger files (~4.5 MB)” . Can we upload a file more than 4.5MB using lightning componet ?

Reply
megha says:

February 6, 2017 at 2:43 am

How can we upload files using ContentDocument in Files Tab?

Reply
SuperDev says:

February 9, 2017 at 5:11 am

Hello Peter!
Thank you! This article was very helpfull.
But I am facing strange issue with this method. I am uploading really small files and save it as ContentDocument. Everything works fine but the callback runs after 1 to even 3 minutes. This is too long for such small files. Do you have an idea what could cause this issue. There is only one small trigger configuring contentVersion fields. anyway apex has 10 seconds limit so this is not the issue.

Any suggestions will be greatful .
Thanks

Reply
Medaphra16g says:

February 11, 2017 at 5:23 am

http://lubelskiots.pl/warsztat-samochodowy-i-jego-oferta
Purchasing a used or new car can be quite a difficult approach if you do not know what you really are performing. By educating yourself about car purchasing before you head to the dealer, you could make issues much easier yourself. The following tips might help your following store shopping vacation become more pleasant.

Usually take a auto mechanic along when shopping for a fresh automobile. Automobile sellers are popular for marketing lemons and you do not need to be their up coming sufferer. Provided you can not have a auto technician to check out automobiles with you, no less than make sure that you have him take a look at final decision before you purchase it.

Know your restrictions. Before you begin buying for your upcoming car or van, make a decision what you can afford to pay, and follow it. Don’t overlook to add curiosity about your calculations. You will definitely shell out around twenty percent as a payment in advance too, so be well prepared.

Just before attending a dealership, know which kind of motor vehicle you want. Research most of you choices prior to purchasing so that you can decide what works for your budget and household needs. Do your homework to learn how much you ought to be paying for a possible car.

Before signing any contract spend some time to read each and every collection, including the fine print. If there is something listed that you just do not fully grasp, usually do not indicator till you purchase an answer that you simply understand. Unsavory salesmen may use a contract to put in a lot of costs which were not mentioned.

If you keep your preceding assistance under consideration next time that you just go looking for a car, you will end up prone to get a good bargain. Buying a vehicle lacks to be a headache. Simply use the guidelines out of this article and you will receive the automobile you need at a very good price.

Reply
vella says:

February 18, 2017 at 7:59 pm

Hi Peter,

We have a need to upload files over 25 MB to Filenet from Salesforce, could you please clarify if the above approach can be used? I am concerned that the heap size would be an issue although the outbound Rest API supports 2GB. Please suggest if there is an alternate way to accomplish the same.

Reply
Jonathan says:

March 9, 2017 at 5:21 pm

Hi Peter,

Great stuff here. I was wondering if you had any thoughts about how to modify this for multiple attachments for the same record.

Have you seen successful examples of this?

Thanks!

Reply
Bruno Perdigão says:

March 17, 2017 at 4:33 pm

For those who’s having problem after the ‘$A.run’ deprecated. I suggest to use:

$A.getCallback(function() {
$A.enqueueAction(action);
})();

Thats works fine for me.

Reply
John says:

April 20, 2017 at 1:44 pm

Very nice! I am using this in a form. How could I force the user to add at least one attachment, making it required?

Reply
Abhi Tripathi says:

May 3, 2017 at 2:14 pm

The same kind of thing I did in Classic tried to replicate the functionality of the data loader, you have done a nice work there sir.

Reply
Ankit says:

May 21, 2017 at 1:08 am

Hi Peter,

I have used your code of file upload for a larger size. but I am facing an issue. The issue is when I am trying to upload same file second time, it does not upload anything. However, if I upload a different file it uploads successfully. Please Let me know if you have any solution.

Reply
Dharmil Shah says:

June 12, 2017 at 3:58 pm

Hi,

I have used this code but somehow my files are getting attached twice. Can you please help? i am uploading a file of around 3mb pdf file.

Reply
1. Dharmil Shah says:
  
  June 27, 2017 at 7:57 am
  
  This lightning component was giving lot of issues while uploading pdf files. So i used vf page for file upload and embedded that in my lightning component. So now i can upload file upto 10mb.
  
  Reply
  1. Anshuman Chauhan says:
    
    August 25, 2017 at 9:43 am
    
    Hi Dharmil,
    
    We were doing same using withing the lightning component but as we are developing managed package so salesforce security has recommended us not to use iframe and suggested to use canvas app for it. So my my question is if you are also using iframe ? if not then could you please tell us some details around it.
    
    Thanks!
    
    Reply
    1. Dharmil Shah says:
      
      August 25, 2017 at 10:37 am
      
      Hi Anshuman,
      
      Unfortunately, I am using iframe.
      
      Reply
      1. Anshuman Chauhan says:
        
        August 27, 2017 at 1:58 am
        
        Okay! Thanks…
Rohit says:

June 20, 2017 at 10:47 pm

Hi Peter,

I am getting this error: Unrecognized base64 character: %. Don’t understand whare I am doing wrong.

Reply
Sylvie Serplet says:

July 20, 2017 at 7:37 pm

Hi Peter,
I have created a Lightning Component to create and send email. I would like to have the ability to attach file to the email. How do you advice me to use your component?
Thanks in advance for your time.

Reply
Arun Kumar says:

August 9, 2017 at 10:27 am

Hi Peter,

I have implemented your code, it’s working fine for smaller file, but it’s not working for larger file. I am getting this error
‘Input too long. [1, 211]’. Can you please… please help me.

Reply
Chayan Arora says:

August 21, 2017 at 8:06 am

Hi Peter,

I am trying to upload 10 MB but it takes very long time. Any solution to reduce time.
Can you please help me out.

Thanks!

Reply
1. Anshuman Chauhan says:
  
  August 25, 2017 at 9:46 am
  
  Hey Chayan,
  You can increase the chunk_size for that.
  Hope this helps!
  Thanks!
  
  Reply
Raja V says:

September 5, 2017 at 3:28 am

Hi if i click once on the save button its not uploading anything.Double clicking only works..Anyone please suggest

Reply
Raja V says:

September 5, 2017 at 3:38 am

Hi if i click once on the save button its not uploading anything.Double clicking only works..Anyone please suggest this

Reply
1. mandeep says:
  
  September 20, 2017 at 11:35 am
  
  Hi Raja, I’m having the same issue. Did you manage to resolve this?
  
  Reply
mandeep says:

September 20, 2017 at 11:36 am

Hi Raja, I’m having the same issue. Did you manage to resolve this issue?

Reply
1. Raja says:
  
  September 27, 2017 at 2:39 pm
  
  Hi below they have got the solution.Please check that.
  
  Reply
piyush soni says:

September 27, 2017 at 2:29 pm

Here is the Working Updated Version 🙂

http://www.sfdcmonkey.com/2017/09/25/file-upload-lightning-component/

Reply
piyush soni says:

September 27, 2017 at 2:30 pm

Here is the Working Updated Version of Custom Large File Upload In lightning Component 🙂

http://www.sfdcmonkey.com/2017/09/25/file-upload-lightning-component/

Reply
Raja says:

September 27, 2017 at 2:38 pm

Yes man.Glad you discovered and got this.Thank you so much piyush just now i saw your mail .Sorry for the delayed response man.cheers!!!!!

Reply
Raja says:

September 27, 2017 at 2:38 pm

Yes man.Glad you discovered and got this.Thank you so much piyush just now i saw your mail .Sorry for the delayed response man.cheers!!!!!!!!!!!!!

Reply
Taylor Ortiz says:

October 25, 2017 at 11:11 am

Have you encountered a bug where you cannot attach the same file 2 times in a row?

Reply
PRR says:

December 20, 2017 at 8:15 am

Hi Peter..
Very Useful Post… I have doubt regarding file upload.
I have created a input which will take some input filed and the input file. After submitting the form I need create a record and attach file to it. For this I used your approach for uploading file. But I need to upload upto upload 25 mb sames attachment limit in salesforce. How can we do it.
We have lightening:fileUpload component where we can upload upto 2 GB.. can we customize this functionality attach the file after record created successfully.

Reply
1. emran says:
  
  July 5, 2019 at 1:45 pm
  
  HI, PRR
  
  did you get solution on these, please let me know if you get it. im also having same issue to upload files
  
  Reply
Pingback: загрузка файлов в contentVersion с использованием компонента молнии SalesForce Ask
Pingback: uploading files in contentVersion using lightning component | Questions
Shankar says:

April 9, 2018 at 2:18 am

Thank u, Thanks a lot! Awesome!

Reply
Pingback: uploading files in contentVersion using lightning component SalesForce Tips
Komal says:

July 23, 2018 at 6:12 am

Hi,
Thanks for the code! The first part works perfectly fine.
For larger files, I am able to upload the files. However, when I download the attached file, I am unable to read it and there is an error “Corrupted file” for PDFs and for images, the whole image does not get loaded.

Any thoughts why this might be happening?

Reply
Komal says:

July 23, 2018 at 6:14 am

Thanks for the code! The first part for smaller files works perfectly fine.
For the larger files, I am able to successfully upload the files. However, there is problem while retrieving the files attached using this code. For PDFs there is a message indicating the file is corrupted and for images, the whole image does not appear.

Any thoughts on why this might be happening and what can be the solution?

Reply
Harsha Nayuni says:

August 29, 2018 at 8:33 am

Hi
Grate to see the coce but my requirement is to read the file(.CSV) and create records.

Did anyone had similar requirement.

Regards,
harsha

Reply
sysfort says:

February 14, 2019 at 6:28 am

can we use this code for uploading video files

Reply
Nagaraju Mogili says:

June 10, 2019 at 2:04 am

when I am trying giving the first Line from the controller getting the error
//MAX_FILE_SIZE: 750 000

org.auraframework.util.json.JsonStreamReader$JsonStreamParseException: Only functions are allowed in javascript controllers [2, 21]: ‘750000’: Source

Reply
Nagaraju Mogili says:

June 10, 2019 at 2:04 am

when I am trying giving the first Line from the controller getting the error
//MAX_FILE_SIZE: 750 000

org.auraframework.util.json.JsonStreamReader$JsonStreamParseException: Only functions are allowed in javascript controllers [2, 21]: ‘750000’: Source

can anyone resolve the issue, why am I getting this as error

Reply
Vaibhav Khanzode says:

October 20, 2020 at 9:36 am

Hi sir, I want to remove that uploaded file and I want to remove perticular single file from multiple uploaded files. Please tell me how will extend your upload lighting component for remove file.

Reply