Question

I’m working on an application that allows the user to send a file using a form (a POST request), and that executes a series of GET requests while that file is being uploaded to gather information about the state of the upload.

It works fine in IE and Firefox, but not so much in Chrome and Safari.

The problem is that even though send() is called on the XMLHttpRequest object, nothing is being requested as can be seen in Fiddler.

To be more specific, an event handler is placed on the “submit” event of the form, that places a timeout function call on the window:

window.setTimeout(startPolling, 10);

and in this function “startPolling” sequence is started that keeps firing GET requests to receive status updates from a web service that returns text/json that can be used to update the UI.

Is this a limitation (perhaps security-wise?) on WebKit based browsers? Is this a Chrome bug? (I’m seeing the same behaviour in Safari though).

Answer 1

I am having the exact same problem. At the moment i use an iframe, which is targeted in the form. That allows the xhr requests to be executed while posting. While that does work, it doesn’t degrade gracefully if someone disables javascript.(I couldn’t load the next page outside the iframe without js) So if someone has a nicer solution, i would be grateful to hear it.

Here the jQuery script for reference:

$(function() {
$('form[enctype=multipart/form-data]').submit(function(){ 
    // Prevent multiple submits
    if ($.data(this, 'submitted')) return false;

    var freq = 500; // freqency of update in ms
    var progress_url = '{% url checker_progress %}'; // ajax view serving progress info 

    $("#progressbar").progressbar({
        value: 0
    });

    $("#progress").overlay({ 
        top: 272, 
        api: true,
        closeOnClick: false,
        closeOnEsc: false, 
        expose: { 
            color: '#333', 
            loadSpeed: 1000, 
            opacity: 0.9 
        }, 
    }).load();

    // Update progress bar
    function update_progress_info() {
        $.getJSON(progress_url, {}, function(data, status){ 
            if (data) {
                var progresse = parseInt(data.progress);
                $('#progressbar div').animate({width: progresse + '%' },{ queue:'false', duration:500, easing:"swing" }); 
            }
            window.setTimeout(update_progress_info, freq);
        });
    };
    window.setTimeout(update_progress_info, freq);

    $.data(this, 'submitted', true); // mark form as submitted.
});
});