How to write a callback for FileReader?

Question

I'm trying to upload multiple attachments. First I'm getting attachments from user interface, then I'm converting them into JSON , then I need to make a server call. In this I'm using FileReader.

        //showing ajax loader
        component.set("v.showLoadingSpinner", true);

       //getting attached files
        var files = component.find("fileId").get("v.files");
        var details = {};    //JS Object need to send server
        details.files = [];

        for (var i = 0; i < files.length; i++) 
        {      
            (function(file) {
                var name = file.name;
                var reader = new FileReader(); 
                reader.fName = files[i]['name'];
                reader.fType = files[i]['type'];
                reader.i = i;
                reader.onload = function(e) {
                    var fileContents = reader.result;
                    var base64 = 'base64,';
                    var dataStart = fileContents.indexOf(base64) + base64.length;
                    fileContents = fileContents.substring(dataStart);
                    var startPosition = 0;
                    var endPosition = Math.min(fileContents.length, startPosition + 750000);
                    var getchunk = fileContents.substring(startPosition, endPosition);
                    var fDetails = {};
                    fDetails.fileName = reader.fName;
                    fDetails.base64Data = encodeURIComponent(getchunk);
                    fDetails.contentType = reader.fType;
                    details.files.push(fDetails);

                }
                reader.readAsDataURL(file);
            })(files[i]);

     // I want to make a server call here with data in "details" object.
   console.log(details);   

But I'm not getting data in above console log.

Please help me to achieve this.

cause calling an ajax is asynchronous so it's not like console line get called after they did their job. — nullqube
– nullqube, Commented Oct 24, 2017 at 13:42
Possible duplicate of How do I return the response from an asynchronous call? — alpinist
– alpinist, Commented Oct 24, 2017 at 13:58

nullqube · Accepted Answer · 2017-10-24 13:50:19Z

1

You can use promises :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://davidwalsh.name/promises

https://developers.google.com/web/fundamentals/primers/promises

Also jQuery provide $.when() function :

https://api.jquery.com/jquery.when/

And with promisejs you can do something like this :

function readJSON(filename){
  return new Promise(function (fulfill, reject){
    readFile(filename, 'utf8').done(function (res){
      try {
        fulfill(JSON.parse(res));
      } catch (ex) {
        reject(ex);
      }
    }, reject);
  });
}

answered Oct 24, 2017 at 13:50

nullqube

3,02921 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to write a callback for FileReader?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related