How to get hash value from an asynchronous function?

Question

I use CryptoJs to have hash (sha256) of a PDF file.

I already have the hash of my file but I can't get it outside the function.

This is my code :

var reader = new FileReader();
var hash = "";

reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        var i8a = new Uint8Array(evt.target.result);
        var a = []; for (var i = 0; i < i8a.length; i += 4) { a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]); }
        var wordArray = CryptoJS.lib.WordArray.create(a,i8a.length);
        var hash = CryptoJS.SHA256(wordArray);
        alert(hash);
    }
};

var blob = file.slice(0, file.size + 1);
reader.readAsArrayBuffer(blob);

alert(hash);

The first alert give me the sha, but the second is empty. How can I do to get hash defined into the function to use it after?

if I add a callBack function it working. But I wanted to make an Ajax request, and when I add the request into a callBack function like this :

function callBack(hash){
     $.ajax({
          type: "POST",
          url:"http://...",
          dataType:'json',
          data:({shaPdf: hash}),
          success: function(data) {
             //...
           },
          error: function(error) {
           }
           });

I have this error into my console :

Uncaught TypeError: Cannot read property 'words' of undefined

Answer 1

You need a call back function:

var reader = new FileReader();
var hash = "";

reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        var i8a = new Uint8Array(evt.target.result);
        var a = []; for (var i = 0; i < i8a.length; i += 4) { a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]); }
        var wordArray = CryptoJS.lib.WordArray.create(a,i8a.length);
        var hash = CryptoJS.SHA256(wordArray);
        callBack(hash); // <-- callBack at the end of this function
    }
};

var blob = file.slice(0, file.size + 1);
reader.readAsArrayBuffer(blob);

function callBack(hash)
{
   alert(hash);
}

Since your reader is loading the file asynchronous, the second alert fires immediately after the other code. The reader is not done yet loading the file, so hash is empty. If we wrap the alert into a function, which we call upon after the onloadend, we are able to use the value outside of the function.