Search code examples
jqueryfile-uploadprogress-barblueimp

Blueimp jQuery Upload Progress - straight to 100%


I am following the basic plus demo, almost to the tee, and cannot get the progress bar to work correctly. That console.log below returns 100% on upload button click.

$('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|pdf)$/i,
        maxFileSize: 5000000, // 5 MB
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,
        formData:function(form){
            //get file name
            var $this = this;
            var formSelector = 'form-' + $($this.files)[0].name.replace(/\W/g,'-');
            return $('.'+formSelector).serializeArray();
        },
        progressall:function(e,data){
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css( 'width', progress + '%');
            console.log(progress);
        }
    })

Solution

  • Progress was going to 100% immediately because it was uploading that fast. When I uploaded a larger file progress was seen to work correctly.