blueimp fileupload - doesn't trigger the progress

Question

I have a very simple upload script, but it doesn't trigger the progress.. It only triggers the progress method once and when the file is done it triggers complete and prints done!

Chrome 58.0.3029.110 (64-bit)
Firefox 53.0.3 (32-bit)

Have also tried to upload larger files and still the progress method is only triggered once

https://github.com/blueimp/jQuery-File-Upload

test

http://dyndev.dk/upload/

code

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
        <script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
        <script src="/upload/js/blueimp/jquery.fileupload.min.js"></script>
        <form id="upload_form" enctype="multipart/form-data" method="post" action="/upload/">
            <input id="upload_input" type="file" name="files[]">
            <input type="hidden" name="send" value="1">
        </form>
        <div id="upload_console"></div>
        <script>
            'use strict';
            
            $(function(){
                var div = $('#upload_console')
                $('#upload_form').fileupload({
                    fileInput : $('#upload_input'),
                    progress : function(e, data){
                        //console.log(data.loaded);
                        //console.log(parseInt(data.loaded / data.total * 100, 10));
                        div.append('<div>'+data.loaded+'</div>')
                    },
                    complete : function(e, data){
                        //console.log('done');
                        div.append('<div>done!</div>')
                    }
                });
            });
        </script>
    </body>
</html>

Works for me (the demo site). Which browser are you using? According to this: https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support#upload-progress it might not work in certain browsers. — Catalyst, Jun 12 '17 at 09:51
The progress works on `Chrome Version 59.0.3071.86 (Official Build) (64-bit) on Ubuntu 16.04 LTS`. — 31piy, Jun 14 '17 at 10:02
Your test http://dyndev.dk/upload/ works on FF 53.0.2 (32 bit) and Google Chrome 58.0.3029.110 (64 bit). — Vanquished Wombat, Jun 14 '17 at 17:23
Can i know the reason for using the "fileUpload jquery". If you can just use the jquery ajax for file uploading then the progress function works perfectly fine in all most of the browser. I have tried your test and also faced similar problem on mac chrome (version: 59.0.3071.104) — ajay92x, Jun 19 '17 at 09:16
Hey, your code is working fine. Earlier i was uploading 8mb file but then i tried to upload 20-40mb and then progress method triggered multiple times. — ajay92x, Jun 19 '17 at 10:18

score 0 · Answer 1 · answered Jun 20 '17 at 10:44

It works for me in the same Firefox 53.0.3. Perhaps your issue is that you're uploading locally, so it's too fast to show any progress?

Even remotely, I only get three calls to progress for a 10MB file.

Try using a different connection, or limiting your upload speed.

t2t · Answer 2 · 2017-06-20T13:23:06.093

I think the reason why your test scenario is not working, is the default chunk size of 10 MB.

You can also try the "fileuploadprogress"-Event: https://github.com/blueimp/jQuery-File-Upload/wiki/Extended-progress-information

Otherwise you can use a chucked upload. But this only works in serval browsers. Here is the key to specify the "maxChunkSize". Then additional callbacks are triggered:

$('#fileupload').fileupload({maxChunkSize: 100000})
    .on('fileuploadchunksend', function (e, data) {})
    .on('fileuploadchunkdone', function (e, data) {})
    .on('fileuploadchunkfail', function (e, data) {})
    .on('fileuploadchunkalways', function (e, data) {});

Here you can try to reduce the maxChunkSize for example to 5000 (500 KB) - but just for your test scenario. In the production enviroment you should use a bigger chunk-size.

https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads

When the user is able to select multiple files for the upload and you want to inform him about the progress of each file-upload you can use the "fileuploadprocessalways"-event.

blueimp fileupload - doesn't trigger the progress

test

code

2 Answers2