Question

I want to ajax upload a file to the server and update the progress bar peroidically.
In the javascript, I have:

xhr.open('POST',' /path/to/upload', true);
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("X-File-id", md5(filename+file.size));
xhr.upload.addEventListener('progress', onprogressHandler, false);
xhr.send(file);

In the event handler, I have :

function onprogressHandler(event) {
    var percent = event.loaded/event.total*100;
    var $target = $(event.target);
    console.log('ok');
    console.log($target);
    console.log('Upload progress: ' + percent + '%');
}

How can I get the information of the xhr request this event is attached to, like which file am I sending so that I can update the progress bar corresponding to that file?

Answer 1

Take advantage of the fact that javascript has closures.

xhr.open('POST',' /path/to/upload', true);
xhr.setRequestHeader("X-File-Name", file.name); //  you have file.name here
xhr.setRequestHeader("X-File-id", md5(filename+file.size));

xhr.upload.onprogress = function(evt) {
    console.log(file.name); // so its available here because of closures
    var percent = evt.loaded/evt.total*100;
    var $target = $(evt.target);
    console.log('ok');
    console.log($target);
    console.log('Upload progress: ' + percent + '%');
}

xhr.send(file);

In that simple example, because you use file.name in the onprogress callback, javascript knows to take the value with the callback and makes it available.