1

When monitoring XHR file upload progress in Safari 9.1 (Chrome and Firefox do fine) using jQuery $.ajax(), loaded starts from 0 and total from the file size. However, in some cases, when the upload finishes, total suddenly doubles and loaded continues incrementing. This makes the progress bar going from 0% to 100% and then back to 50% and finishing in 100%.

Files are correctly sent to the backend. The only problem is the progress bar, and the fact that the file is probably uploaded twice (I haven’t tested that).

I’ve tried clearing the input file element with $(e).val(“”), wrapping a form element and resetting it, and deleting it and creating a new one. Nothing works.

Also checked the FormData creation, used $.ajaxSettings.xhr() to recover the XMLHttpRequest, and new XMLHttpRequest() to create it instead. Nothing changes.

Also tried jQuery 2.2.3 (instead of 1.11.3) and the behaviour is the same.

I’ve looked for similar code and couldn’t find any main difference and also couldn’t find any similar documented error except this one: Safari xhr drag'n'drop file upload seems to occur twice, where the guy solved the problem using a FormData object (which I am already using).

This is the relevant uploading code triggered on file input change:

function activityUploadImages(o){
    var p, i, f, q, d;
    p = $(o);
    for(i = 0; f = o.files[i]; i++){
        (q = $("<div>")).insertBefore(p)
        .append($("<div>")
            .append($("<span>"))
        );
        d = new FormData();
        d.append("action", "uploadimage");
        d.append("image", f);
        ldAjax(
            "POST",
            "",
            d,
            {
                context: q,
                onProgress: function(p, t, q){
                    q.find("span").animate({
                        "height": p / t * 100 + "%"
                    }, {
                        queue: false,
                        duration: 200
                    });
                }
            }
        );
    }
    p.val("");
}

function ldAjax(type, url, data, options){
    var o;
    o = {
        type: type,
        url: url,
        data: data
    };
    if(options.onProgress)
        o.xhr = function(){
            var x;
            x = $.ajaxSettings.xhr();
            x.upload.onprogress = function(e){
                options.onProgress(e.loaded, e.total, options.context);
            };
            return x;
        }
    if(data instanceof FormData){
        o.contentType = false;
        o.processData = false;
    }
    return $.ajax(o);
}
Community
  • 1
  • 1
Ricardo
  • 180
  • 2
  • 12
  • What is purpose of `for` loop? Is there a single `` element for multiple progress events called within `for` loop? Are you re-defining `q` before previous iteration of `for` loop completes at `(q = $("
    ")).insertBefore(p)`?
     – guest271314 May 11 '16 at 14:24
  • The `for` loop iterates through the multiple files selection and creates a `
    ` block for each file. `q` is set to point to this block and is passed as context to the XHR call.
     – Ricardo May 14 '16 at 14:40
  • Yes, though `q` could be re-defined before ajax completes within `for` loop. – guest271314 May 14 '16 at 14:53
  • See http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery/ – guest271314 May 14 '16 at 14:58
  • Thanks for the link, but I can’t see the relationship. Everything works perfectly in the code above. The images are sent and processed properly. The only problem is the wrong progress reported and the fact that the images are probably sent twice. – Ricardo May 16 '16 at 11:08
  • Again, that could be due to `q` variable being redefined before previous ajax call completes within `for` loop – guest271314 May 16 '16 at 14:25
  • Not the case. Any `q` conflict would mess up the `span`s images when the upload finishes, after the progress bar reaches 100%. – Ricardo May 18 '16 at 06:40
  • Can you create a jsfiddle to demonstrate? – guest271314 May 18 '16 at 06:49

0 Answers0