Question

I am using the blueimp File Upload plugin to implement some file upload functionality and I’ve noticed that there can be large gaps of time between when my last file progress bar hits 100% and when the stop and done events fire.I have the following code:

        $('#fileupload').fileupload({
            dataType: 'json',
            progress: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                var bar = data.context.children().children(".progress");
                $(bar).css("width", progress + "%");
            },
            add: function (e, data) {
                data.context = $("<div></div>").html("Uploading...<div class='progressHolder'><div class='progress'>&nbsp;</div></div>").appendTo($("#files"));
                data.submit();
                $("#processing").fadeIn();
            },
            stop: function (e, data) {
                $("#uploadFiles").fadeIn();
                $("#processing").fadeOut();
            },
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    idArray.push(file.Id);
                });
            }
        });

Does anyone know why this would be happening? How can I make it so that the progress bars take into account when done/stop will be called?

Answer 1

When you upload a file, the file is first (obviously) uploaded to the server, the server then will execute the requested server-side script where you then handle the file. If the “handle the file” part of the request isn’t instant, there will be a delay between the progress reaching 100% and the done callback being triggered. There may also be a delay if there is network lag.

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

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 + "%");
        },