jQuery variable not being updated

Question

I am using HTML5 file API to get the width of an image.

Its working, and the console.log is outputting the correct amount.

I need to save the value to the variable fileWidth so I can access it outside the function. I have created an empty variable outside the function, and expected it to be updated with the alue inside the function, but whatever I try fails.

Here is my code:

var fileWidth;
var reader = new FileReader;
reader.onload = function() {
    var img = new Image;
    img.onload = function() {
        fileWidth = img.width;
        console.log(fileWidth);
    };
    img.src = reader.result;
};

reader.readAsDataURL($('#submission-file')[0].files[0]);

Can anyone see why the variable isn't being updated?

Edited Code:

var fileWidth;
var reader = new FileReader;
reader.onload = function() {
    var img = new Image;
    img.src = reader.result;
};
reader.onloadend = function() {
    fileWidth = img.width;  
};

reader.readAsDataURL($('#submission-file')[0].files[0]);

console.log(fileWidth);

Answer 1

You're setting fileWidth in an asynchronous callback, this method isn't guaranteed to have executed prior to your accessing the variable.

Hint

Try putting an alert in your callback and an alert right before you access the variable. See which alert is presented first.