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]" />

Answer 1

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) {
            /**/
        });
    }
});

Answer 2

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!');
}

Answer 3

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.

Answer 4

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 !

Answer 5

Try this Callback Option as described in the documentation:

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

It sure works for me.

Answer 6

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();
    }
);

Answer 7

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

Answer 8

 $(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