Any way to know if a XMLHttpRequest has completed within a separate XMLHttpRequest scope?

Question

any help with the following would be gratefully accepted:

I have a scenario whereby I have a variable number of Ajax file uploads on a page, each contained within their own Form. During each forms' onSubmit action I call a separate method called PostFile() to perform the file upload as follows:

function PostFile(fileInputId, id) {

    var formdata = new FormData();
    var fileInput = $('#fileinput' + '_' + id)[0];

    formdata.append(fileInput.files[0].name, fileInput.files[0]);
    formdata.append("Id", id);

    //Creating an XMLHttpRequest and sending
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/Bookings/UploadArtwork');

    xhr.send(formdata);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {            

            if ($.ajax.active == 0) {

                NoOtherFilesBeingUploaded();
            }
        }
    };
}

My issue is that I only want the NoOtherFilesBeingUploaded() function to run if there are no other files currently being uploaded via other forms on the page; i.e. if there are no other XMLHttpRequest in progress.

Effectively I need a counter of current open XMLHttpRequests. However, I've discovered that ajaxStart() does not fire for XMLHttpRequests events so $.ajax.active is always 0.

Anybody have any ideas?

Thanks in advance

Update:

I'm using XMLHttpRequest so I can add a progress bar as follows:

xhr.upload.addEventListener("progress", function (event) {

    if (event.lengthComputable) {
        var percentComplete = Math.round(event.loaded * 100 / event.total);
        $('#progressNumber_' + id).html(percentComplete.toString() + '% complete');
    }
    else {
        $('#progressNumber_' + id).html('unable to compute');
    }
}, false);

Apologies for leaving this out of the original post.

Answer 1

ok here's how I got it working:

function PostFile(fileInputId, id) {

    var formdata = new FormData();
    var fileInput = $('#fileinput' + '_' + id)[0];

    formdata.append(fileInput.files[0].name, fileInput.files[0]);
    formdata.append("id", id);

    $.ajax({
        url: '/Bookings/UploadArtwork',
        data: formdata,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        xhr: function()
        {
            var xhr = new window.XMLHttpRequest();

            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    $('#progressNumber_' + id).html(percentComplete.toString() + '% complete');
                }
            }, false);

            xhr.addEventListener("loadend", function (evt) {
                if ($.active == 0) {
                    NoOtherFilesBeingUploaded();
                }
            }, false);

            return xhr;
        },
        success: function (data) {

        }
    });
}

Thanks to Dave Bond here: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/