blueimp Jquery upload plugin : Large gap between last file progress hitting 100% and the done event

Question

all people are asking the same questions no no answer anywhere in all threads and forums.

$('#fileupload').fileupload({
    dropZone: $("#dragandrop"),
    pasteZone: $("#dragandrop"),
    //singleFileUploads: false,
    //progressInterval:50,
    //bitrateInterval:500,
    //forceIframeTransport: true,
    dataType: 'json',
    add: function (e, data) {
        data.submit();
    },
    progress: function (e, data) {
            //if (data.loaded == data.total ) {
            //    if (e.lengthComputable) {
            var progress = parseInt(data._progress.loaded / data.total * 100, 10);
            console.log(data.loaded + " " + data.total + " " + data.bitrate);
            $('#progress .bar').css('width', progress + '%');
        //}
    },
    always: function (e, data) {
        $('#progress .progress-bar').css('width',0);
    },
    done: function (e, data) {
        var result = data.result.data;
        //add the flash success message
        $('#trust-center-flash-message').html(result.message);
        //add the new images to the preview
        previewImages(result.attachments);
        return alert("done");
    }
});

I tried all the solutions on the internet. I'm not using the plugin back-end php class.

I found that this gap caused because of my backend. but still, is there anyway to make it works when the backend finished ? — Safaa Alnablsi, Mar 27 '15 at 12:02
Please check my solution/workaround here: https://stackoverflow.com/a/47461810/2277301 — BSUK, Nov 23 '17 at 18:51

score 1 · Answer 1 · edited May 23 '17 at 10:27

As Kevin B says it, and as you mentions yourself:

The progress event only tracks the progress of the upload, not the progress of the request.

One way to solve this problem is to update how we respond to the progress event.

One solution would be to have your progress bar stop at say, 90% then bump it to 100% in the done callback. simply multiply data.total by 1.1
    progress: function (e, data) {
        var progress = parseInt(data.loaded / (data.total*1.1) * 100, 10);
        var bar = data.context.children().children(".progress");
        $(bar).css("width", progress + "%");
    },

You could also do this for the event "progressall" depending on which one you want to modify.

For all the callbacks see the API, here are some of those that might find your interest

$('#fileupload')
...
.bind('fileuploadprogress', function (e, data) {/* ... /})
.bind('fileuploadprogressall', function (e, data) {/ ... /})
.bind('fileuploadchunkdone', function (e, data) {/ ... /})
...
.bind('fileuploadprocessdone', function (e, data) {/ ... */})

blueimp Jquery upload plugin : Large gap between last file progress hitting 100% and the done event

1 Answers1