File Upload Component Lightning not working

Question

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);
            fr.readAsDataURL(file1);

        });
      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);

        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); 
        });
    }
})

I am getting error:

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

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