0

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.

  • 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 '17 at 21:59
  • @RahulSharma: upload() is inside save function only but still keep on receiving the same error message. – Debarun Sengupta Mar 8 '17 at 4:25
  • Try changing "upload: function" to "upload= function" – Raul Mar 8 '17 at 7:28
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.