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

Lampedusa

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

Lampedusa

Works. Note that you have to change "data.result.files" to "data.files". – Clannish

the solution to push files in IE < 10 is all about "data.submit();" in the add callback. – Slemmer

"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. – Johan

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

Maleki

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. – Mosra

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.

Tabard

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 !

Braziel

I changed a 200 OK response to a simple json encoded string and it worked. – Janellajanelle

Answer 5

Try this Callback Option as described in the documentation:

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

It sure works for me.

Norwegian

This has worked for me.This function work with older version – Caul

Answer 6

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

Ella

Thi answer is not useful, please add some details – Radarman

I hope there are now enough details to satisfy Sfill_81 – Ella

Answer 7

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/[email protected]/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/[email protected]/js/vendor/jquery.ui.widget.js"></script>
  <script src="https://unpkg.com/[email protected]/js/jquery.iframe-transport.js"></script>
  <script src="https://unpkg.com/[email protected]/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();
    }
);

Nicolenicolea

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

Harville