I am creating a custom lightning file upload component.

Below is the component code

  save : function(component, event, helper) {
        var MAX_FILE_SIZE = 750000;
        var fileInput = component.find('file').getElement();
        console.log('fileInput', fileInput); 
        console.log('file', fileInput.files[0]); // this return file object
        var file1 = fileInput.files[0];
        if(file1.size > MAX_FILE_SIZE) {
            console.log('File size exceeded the maximum upload limit.');
            return false;

        var fr = new FileReader();
        var fileContents;
        var self = this;
        fr.onload = $A.getCallback(function(){
             fileContents = fr.result;
            var base64Mark = 'base64,';
            var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
            fileContents = fileContents.substring(dataStart);

      this.upload(component, file1, fileContents);
         // this doesn't work
    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);

            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() {

I am getting error:

this.upload is not a function.Not sure where I am making the mistake.

  • If code mentioned is of your controller, you should move utility methods inside helper. Currently with this keyword it looks for upload() inside save function.
    – Raul
    Mar 7, 2017 at 21:59
  • @RahulSharma: upload() is inside save function only but still keep on receiving the same error message. Mar 8, 2017 at 4:25
  • Try changing "upload: function" to "upload= function"
    – Raul
    Mar 8, 2017 at 7:28

1 Answer 1


Move upload() and uploadChunk() into the Helper with the following signature:

upload: function(component, helper file, fileContents) {...},

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

(notice we added the 'helper' arg)

In save() call upload() like this:

helper.upload(component, helper, file1, fileContents);

In upload(), call uploadChunk() like this:

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

In uploadChunk(), call uploadChunk() like this:

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

You may also want to take a look at this blog post to see how you can encapsulate the file upload logic in a reusable JS file: https://developer.salesforce.com/blogs/developer-relations/2016/12/lightning-components-code-sharing.html

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .