0

So I am calling a function inside another function but for some reason it doesn't work. The function is never called.

save : function(component) { 
    var maxFileSize = 750000;
    var fileInput = component.find("file").getElement(); 
    var file = fileInput.files[0];  
            if (file.size > maxFileSize) {
        alert('File size cannot exceed ' + maxFileSize + ' 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);
        alert("WORKING"); //check at this point- alert works
        self.upload(component, file, fileContents);
        alert("DID IT WORK?"); // This alert not shown so upload call not working
    };
    fr.readAsDataURL(file); //fr.onload function triggered from here
},

upload: function(component, file, fileContents)
{ alert("Here");  //NEVER CALLED              
} 

I've updated my code and for some reason it still does not work. I've added 'var self = this;'

4

The this pointer is different inside the callback function. So, you need to save it into a different variable. Then, use that variable instead of this inside your callback. For a Lightning helper, I save it to one called helper

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

 var fr = new FileReader();
 var helper = this;
 fr.onload = function() {
        var fileContents = fr.result;
        var base64Mark = 'base64,';
        var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
        fileContents = fileContents.substring(dataStart);
        alert("WORKING"); //check at this point- alert works
        helper.upload(component, file, fileContents);
        alert("DID IT WORK?"); // This alert not shown so upload call not working
    };
    fr.readAsDataURL(file); //fr.onload function triggered from here
},

upload: function(component, file, fileContents)
{ alert("Here");  //NEVER CALLED              
} 

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

  • 1
    So use upload.call(..);? – M guy Sep 26 '17 at 10:16
  • No, just store the reference to this as something else, then use that to call the function on the helper. The problem is that your onload function is being called by the FileReader, so you can't control what it decides to do with the "this" reference. So, keep track of the helper with your own var. – Aidan Sep 26 '17 at 11:13
  • No worries, there's a good reference on MDN somewhere where they talk about "this" and "that" and explain all this well. I can't find it though, because this and that are rubbish search terms for google! – Aidan Sep 26 '17 at 11:15
  • I can imagine haha – M guy Sep 26 '17 at 11:15
  • @Aiden I have updated my code to include 'var self = this;' but it still is not going the my upload function. Any ideas? – M guy Sep 26 '17 at 12:48

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.