CODEWITHSUNDEEP
javascriptangularpromise
JWiley
JWiley

Reputation: 3219

Promise function with FileReader resolves prematurely

I'm opening a file to read contents like so:

convertBlobToBase64(blob){
    var convertPromise = new Promise(function(resolve, reject){
      var fileReader = new FileReader();
      fileReader.onload = function() {
          var dataUrl = this.result;
          var base64 = dataUrl.split(',')[1];
          resolve(base64);
      };

      fileReader.readAsDataURL(blob);
    });

    return convertPromise;
  }

I then call this function and pass the result data when it resolves:

myFunction(audioFile){
    var to64 = this.convertBlobToBase64(audioFile);
    to64.then(function(base64Val){
        var nextPromise = postCall();
        nextPromise.then(//stuff);
        return nextPromise;
    });

    return to64;
}

However, when I call myFunction, it immediately returns a resolved promise that includes the converted data from convertBlobToBase64, and not an unresolved promise that should be waiting on nextPromise as expected.

Instead, myFunction's .then is called immediately and fails as it doesn't have the correct data. Am I misunderstanding the Promise function?

Upvotes: 1

Views: 1230

Answers (2)

bigless
bigless

Reputation: 3111

Btw you dont need to wrap another promise to a function. You can use your postCall as resolve func and chain it like this:

myFunction(audioFile){
  return convertBlobToBase64(audioFile)
    .then(base64Val => postCall())
    .then(//stuff)
}

Upvotes: 1

Anton Harniakou
Anton Harniakou

Reputation: 880

Try this code:

myFunction(audioFile){
    var to64 = this.convertBlobToBase64(audioFile);
    return to64.then(function(base64Val){
        var nextPromise = postCall();
        return nextPromise.then(//stuff);
    });
}

Upvotes: 1

Related Questions