22

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

8 Answers 8

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!');
}
1
  • 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. Commented Aug 27, 2014 at 13:11
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) {
            /**/
        });
    }
});
3
  • 2
    Works. Note that you have to change "data.result.files" to "data.files".
    – joan16v
    Commented Mar 3, 2014 at 12:22
  • the solution to push files in IE < 10 is all about "data.submit();" in the add callback. Commented Mar 24, 2014 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
    Commented Jul 16, 2014 at 2:08
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.

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 !

1
  • I changed a 200 OK response to a simple json encoded string and it worked.
    – Edza
    Commented Feb 10, 2020 at 8:48
1

Try this Callback Option as described in the documentation:

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

It sure works for me.

1
  • This has worked for me.This function work with older version Commented Jul 8, 2018 at 7:55
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 + '%'
    );
  }
         
});
2
  • Thi answer is not useful, please add some details
    – law_81
    Commented Apr 9, 2021 at 10:24
  • I hope there are now enough details to satisfy Sfill_81 Commented Apr 10, 2021 at 12:17
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.