return value calculated from javascript FileReader onload event

Question

I have this function:

function doStuff(range, file) {
    var fr = new FileReader();
    var hash = '';
    fr.onload = function (e) {
        var out = "stuff happens here";
        hash = asmCrypto.SHA256.hex(out);
        return hash;
    };
    fr.readAsArrayBuffer(file);
    return hash;
}

Right now, the function completes before the onload event is finished, so doStuff always returns "". I think a callback is what I need, but I'm new to javascript, and I can't wrap my mind around how to implement it in this case.

Solution

File reading using File Reader is asynchronous operation. Place your logic inside the onload function of file reader.

function doStuff(range, file) {
    var fr = new FileReader();
    fr.onload = function (e) {
        var out = "stuff happens here";
        hash = asmCrypto.SHA256.hex(out);
        /* Place your logic here */
    };
    fr.readAsArrayBuffer(file);
}

You can even pass a callback function that will be executed once the file is read.

function doStuff(range, file, callback) {
    var fr = new FileReader();
    fr.onload = function (e) {
        var out = "stuff happens here";
        hash = asmCrypto.SHA256.hex(out);
        /* Assuming callback is function */
        callback(hash);
    };
    fr.readAsArrayBuffer(file);
}