jQuery FileUpload doesn't trigger 'done'

Question

I use jQuery-File-Upload plugin. I wrote a simple code to test it - and it works, but not without problems. It doesn't trigger done, even if the file is uploaded and progress bar reached its end.

Here's the code:

$('#file_file').fileupload({
    dataType: 'json',
    autoUpload: true,
    add: function (e, data) {
        data.context = $('<p/>').text('Uploading...').appendTo(document.body);
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    done: function (e, data) {
        alert('Done');
    }
});

My input is as simple as that:

<input type="file" id="file_file" name="file[file]" />

score 31 · Answer 1 · answered Aug 09 '13 at 22:34

31

If your server is not returning JSON, try removing:

dataType: 'json'

Otherwise you may be ending up with a fail event, which is easy to test for:

fail: function(e, data) {
  alert('Fail!');
}

answered Aug 09 '13 at 22:34

bradw2k

693
7
11

1

heh... This solved my problem. In case JSON output is buggy, done callback is not fired. Sounds good but I was searching why the callback is not fired before checking JSON. – Kevin Labécot Aug 27 '14 at 13:11

score 10 · Accepted Answer · answered Feb 03 '13 at 18:06

10

I changed couple of things and it works. Here:

$('#file_file').fileupload({
    autoUpload: true,
    add: function (e, data) {
        $('body').append('<p class="upl">Uploading...</p>')
        data.submit();
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    },
    done: function (e, data) {
        $('.upl').remove();
        $.each(data.files, function (index, file) {
            /**/
        });
    }
});

answered Feb 03 '13 at 18:06

Tomek Buszewski

7,659
14
67
112

2

Works. Note that you have to change "data.result.files" to "data.files". – joan16v Mar 03 '14 at 12:22
the solution to push files in IE < 10 is all about "data.submit();" in the `add` callback. – Wagner Leonardi Mar 24 '14 at 16:52
1

"data.results.files" contains more stuff, like thumbnailUrl and the "name" is the actual file name of the file on the server instead of data.files' name which gives you the name that the user had for the file. – Ian Jul 16 '14 at 02:08

score 6 · Answer 3 · answered May 29 '13 at 09:47

6

I repaired with autoUpload: true, it looks like when the autoUpload property is not set (even if upload is working as expected) the done event is not triggered.

answered May 29 '13 at 09:47

Juanmi Taboada

539
10
25

score 2 · Answer 4 · edited Jun 08 '16 at 13:31

2

Experimented today! If you're using PHP, be sure that your uploadhanler PHP file doesn't display error or warning. It creates a bad JSON output and when your file is uploaded, the plugin cannot send a correct JSON buffer with done event.

For error tracking on your PHP file, it's better to write a log file instead of display errors on such scripts. You can use:

error_reporting(0)

But DO NOT FORGET to add error tracking in a log file. Of course !

edited Jun 08 '16 at 13:31

Gustavo Morales

2,614
9
29
37

answered Jun 08 '16 at 12:35

YlianEstevez

21
1

I changed a 200 OK response to a simple json encoded string and it worked. – Edza Feb 10 '20 at 08:48

score 1 · Answer 5 · answered Jun 18 '16 at 17:40

1

Try this Callback Option as described in the documentation:

$('#fileupload').bind('fileuploaddone', function (e, data) {
    alert('Done');
});

It sure works for me.

answered Jun 18 '16 at 17:40

Waqleh

9,741
8
65
103

This has worked for me.This function work with older version – Kashif Hanif Jul 08 '18 at 07:55

user3680973 · Answer 6 · 2021-04-10T12:14:37.920

1

I guess this is no longer a hot topic but I have just solved the problem by using the always callback instead of the done callback. This callback is described here

The relavant part of the code now looks like this:

$('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: true,
        url: 'transit/',
        always: function (e, data) {
        moveFile();
    },
    
    progressall: function (e, data) {
    var progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress .progress-bar').css('width', progress + '%'
    );
  }
         
});

edited Apr 10 '21 at 12:14

answered Apr 09 '21 at 09:32

user3680973

21
4

Thi answer is not useful, please add some details – Sfili_81 Apr 09 '21 at 10:24
I hope there are now enough details to satisfy Sfill_81 – user3680973 Apr 10 '21 at 12:17

score 0 · Answer 7 · answered Oct 21 '17 at 17:24

i'm using multer, multer-azure-storage, and blueimp-file-upload. all served from unpkg.com. below is a multiple file upload with the done trigger. working as of 10/22/17.

js file:

  <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/vendor/jquery.ui.widget.js"></script>
  <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.iframe-transport.js"></script>
  <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.fileupload.js"></script>

page html, served from express:

      $('#fileupload').fileupload({
          url: 'https://domainwhatevs/my-listings/edit/[property id]/gallery',
          paramName: '_file',
          dataType: 'json',
          type: 'POST',
          autoUpload: true,
          add: function (e, data) {
              console.log('uploading:', data)
              data.submit();
          },
          done: function (e, data) {
              console.log('done triggered');
              console.log(data._response.result.result[0].originalname, 'uploaded at', data._response.result.result[0].url);
              $.each(data.files, function (index, file) {
                // console.log(file.name, 'uploaded.')
                // console.log('done');
                // console.log(index);
                // console.log(file);
              });
              console.log(data);
          }
      });

// GET /my-listings/edit/[property id]/gallery

app.get(
    [
        '/my-listings/edit/:_id/gallery'
    ],
    (req, res) => {
        console.log('image gallery:', req.params._id);
        res.render('my-listings--edit--gallery', {
            _id: req.params._id,
            session: req.session
        });
    }
);

// POST /my-listings/edit/[property id]/gallery

 app.post(
    [
        '/my-listings/edit/:_id/gallery'
    ],
    upload.array('_file'),
    (req, res, next) => {
        console.log(req.files);
        res.setHeader('Content-Type', 'application/json');
        res.send({result: req.files});
        next();
    }
);

mikakun · Answer 8 · 2013-02-03T18:00:49.610

 $(input).fileupload(

       url      : '...'

      ,dataType : 'json'
      ,sequentialUploads : true

       ,add      : function (e,data) {


           $.each(data.files,function(i,file){

                file.jqXHR = data.submit()
                           .success(function (result, textStatus, jqXHR) {/* ... */})
                           .error(function (jqXHR, textStatus, errorThrown) {
                             })
                           .complete(function (result, textStatus, jqXHR) { 
                               //...                   
                                     });

                 });
       }


       ,done: function (e, data) {
         console.log(data);

       }


   });

works perfectly for me;

differences are

the url is set (i hope you just forgot to put it in your snippet here);
the way i add file to the download queue
sequential upload (?)

edit :

The jQuery File Upload plugin makes use of jQuery.ajax() for the file upload requests. This is true even for browsers without support for XHR, thanks to the Iframe Transport plugin.

The options set for the File Upload plugin are passed to jQuery.ajax() and allow to define any ajax settings or callbacks. The ajax options processData, contentType and cache are set to false for the file uploads to work and should not be changed.

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

somewhere in your code you could have also changed those ajax settings; anyhow that says that if you have your settings right since it's making use of $.ajax the done cannot be not triggered

jQuery FileUpload doesn't trigger 'done'

8 Answers8

Linked