Question

for (var i=0, file; file=files[i]; i++) {
    if (file.type=='image/jpeg') {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#upload_preview').append('<img src="'+e.target.result+'" width="150" alt="" />');
            alert(file.type); // error - file is undefined
        }
        reader.readAsDataURL(file);
    }
}

Variable reader was declared within the code block where file was defined, yet the error reports variable file is undefined. this is driving me crazy, and I know it’s something really basic.

Answer 1

So this loop for (var i=0, file; file=files[i]; i++) mention in the comments will set file to undefined in the last loop. You should use each or call a function in the for loop to save scope.

files.forEach(function(file){
if (file.type=='image/jpeg') {
    var reader = new FileReader();
    reader.onload = function(e) {
        $('#upload_preview').append('<img src="'+e.target.result+'" width="150" alt="" />');
        alert(file.type); // error - file is undefined
    }
    reader.readAsDataURL(file);
}
})

or if you need to support older browser:

for (var i=0, l=files.length; i < l; i++) {
    (function(i) {
        var file = files[i];
        if (file.type == 'image/jpeg') {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#upload_preview').append('<img src="' + e.target.result + '" width="150" alt="" />');
                alert(file.type); // error - file is undefined
            }
            reader.readAsDataURL(file);
        }
    })(i);
}