File APIs Javascript FileReader onload

Question

I am using File APIs with Javascript.
I need to wait for the completation of onload method, how can I do it?

reader.onload = function (e) {
    contents = reader.result;
    var addAttchCallBack = loadRequestExecutor();
    addAttchCallBack.done(function (data) {
        alert("ok");   
    })
};
alert("Ko");

I see always before "Ko"
N.B: the function loadRequestExecutor() correctly returns a promise obj.
Thanks,Nk

return addAttachCallBack.then(function(data){ alert("ok");return data;})` you need to return thh promise. Also assuming you already know how asynchronous coding works in JS - did you read the 'coverting a callback api to promises' question yet? — Benjamin Gruenbaum, Apr 02 '14 at 21:07
The problem is that the onLoad is asynch. I tried $.when(reader.onload = function (e) { contents = reader.result; return loadRequestExecutor(); }).done(function (a) { alert("ok"); }); alert("KO"); — Nk SP, Apr 03 '14 at 07:51
http://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises — Benjamin Gruenbaum, Apr 03 '14 at 08:42

score 1 · Answer 1 · answered Jun 19 '14 at 10:18

You really need to study up on Async behavior and callbacks, then take on understanding promises, as your examples are an odd combination of callbacks and promises, but, to try and explain what is going on in basic terms:

Example 1:

You always seeing KO first, because the first example does this:

Assign a function to a property that will be called back later
Show a KO alert
At some time later the file loads, starts the executor, which on complete (if it ever does) alerts OK

so, basically your onload function will only get called after the file loads (asynchronously), so the alert on the next line gets executed immediately.

Example 2:

You second example, in a comment, is this:

$.when(reader.onload = function (e) {
    contents = reader.result;
    return loadRequestExecutor();
}).done(function (a) {
    alert("ok");
});
alert("KO");

Which translates to:

Assign a function to a property that will be called back later
Pass that same function to when but do not execute it!!!
Show a KO alert
At some time later when the file loads, return the loadRequestExecutor() to the filereader!!!

The end result is not returning the promise to the wait, which is what you probably meant, so it will never work as expected.

Suggestion:

I do not know the plugins that well, but you appear to need to record a promise relating to the load request executor, if that is what you want to wait for.

// Create the loadRequestExecutor and record the promise
var addAttchCallBack = loadRequestExecutor();

// Setup the onload callback  
reader.onload = function (e) {
    contents = reader.result;
    alert("ok - file load is done");   
};

// Listen for the loadRequestExecutor to complete
addAttchCallBack.done(function (data) {
    alert("Ko - loadRequestExecutor is done");
})

alert("I am just an alert that will happen first, as everything above is asynchronous!");

Your overall aim is not clear from the question, so this answer mainly focuses on exampling why your two attempts do not work as you expected.

File APIs Javascript FileReader onload

1 Answers1

Example 1:

Example 2: