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

bradw2k · Accepted Answer · 2013-08-09 22:34:27Z

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 9, 2013 at 22:34

bradw2k

6937 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Labécot Over a year ago

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.

Tomek Buszewski · Accepted Answer · 2013-02-03 18:06:40Z

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 3, 2013 at 18:06

Tomek Buszewski

8,01515 gold badges70 silver badges116 bronze badges

3 Comments

joan16v Over a year ago

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

Wagner Leonardi Over a year ago

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

Ian Over a year ago

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

Juanmi Taboada · Accepted Answer · 2013-05-29 09:47:15Z

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, 2013 at 9:47

Juanmi Taboada

54512 silver badges27 bronze badges

Comments

Gustavo Morales · Accepted Answer · 2016-06-08 13:31:29Z

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 8, 2016 at 13:31

Gustavo Morales

2,6709 gold badges34 silver badges40 bronze badges

answered Jun 8, 2016 at 12:35

YlianEstevez

211 bronze badge

1 Comment

Edza Over a year ago

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

Waqleh · Accepted Answer · 2016-06-18 17:40:56Z

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, 2016 at 17:40

Waqleh

10.2k9 gold badges69 silver badges104 bronze badges

1 Comment

Kashif Hanif Over a year ago

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

user3680973 · Accepted Answer · 2021-04-10 12:14:37Z

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, 2021 at 12:14

answered Apr 9, 2021 at 9:32

user3680973

214 bronze badges

2 Comments

law_81 Over a year ago

Thi answer is not useful, please add some details

user3680973 Over a year ago

I hope there are now enough details to satisfy Sfill_81

xemasiv · Accepted Answer · 2017-10-21 17:24:50Z

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

Collectives™ on Stack Overflow

jQuery FileUpload doesn't trigger 'done'

7 Answers 7

1 Comment

3 Comments

Comments

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

3 Comments

Comments

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related