blueimp jquery file upload - "done", "complete" callbacks not working for IE 9

Question

I am using Blueimp Jquery File Upload plugin to upload files asynchronously. It works well in most other browsers (with a few minor issues) - on IE, I see this issue that the "done", "stop", "always", "complete" and some other event callbacks are not getting invoked.

While debugging, I added console.logs in the "done", "fail", "always", and added a "complete" method to the ajax request in the _onSend function (in jquery.fileupload.js) - but none of them seem to get invoked in IE.

_onSend: function (e, data) {
        var that = this,
            jqXHR,
            slot,
            pipe,
            options = that._getAJAXSettings(data),
            send = function (resolve, args) {
                that._sending += 1;
                jqXHR = jqXHR || (
                    (resolve !== false &&
                    that._trigger('send', e, options) !== false &&
                    (that._chunkedUpload(options) || $.ajax(options))) ||
                    that._getXHRPromise(false, options.context, args)
                ).complete(function (result, textStatus, jqXHR) {
                    console.log("complete"); 
                }).done(function (result, textStatus, jqXHR) {
                    console.log("done", result); 
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    console.log("fail", result); 
                }).always(function (a1, a2, a3) {
                    console.log("done", result); 

                   }
                });
                return jqXHR;
            };

[plugin code trimmed for readability]

I understand that in IE 9, jquery.iframe-transport.js used for the file upload (as XHR file uploads are not supported in IE).

I'm not sure how I should go about fixing/ debugging this issue.

Thanks!

Imposition

Answer 1

The done event gets fired if the content-type of the response is set to "text/html" or "text/plain" (instead of application/json) when json is being returned from the server. This applies only for browsers that do not support XHR file upload (such as IE9) and where the blueimp plugin is using IFrame transport instead.

Related info under "Content Negotiation" in the plugin documentation: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup

Imposition

how can we do that for rails app ? – Zeldazelde

@CanCeylan: render :text => { ... }.to_json instead of render :json => { ... } – Manifestative

@Imposition thank you for taking the time to write down this response. It fixed an issue that I've been debugging for a while now. – Dublin

@Dublin Glad that it was of help! I had spent quite a while trying to fix the issue as well. – Imposition

I am rendering a 'js.haml' partial using "render partial: "partial_name" and return", still in IE 8 & 9, blueimp is not working. It works in IE 10. When images is submitted in IE 8/9, "formData" attributes are not in params, hence problem is occurring. Can any one help me in this. – Grader

@Imposition Note that according to the docs the done callback is also called when the JSON response contain an error property (for the case you described) github.com/blueimp/jQuery-File-Upload/wiki/Options#done – Noreennorene

Answer 2

For the record, I ran into this problem when uploading direct to S3, now that their CORS feature allows for that.

The solution was to set success_action_status to '200', and then the Done event was triggered correctly.

Vespertine

Answer 3

In case anyone is still having this issue with direct upload to S3 the solution is to add a success_action_status field with the value of "201". Make sure that that you include it as part of the policy data as well since they have to match.

Apparently when receiving the upload from IE9 S3 will return an empty string. To get it to return XML, which the file uploader needs, you have to tell it return a status of 201.

Thora

Were you able to parse the XML result? I need to get the key name of the uploaded file, I can see it in the XML response, but data.result is undefined with the done method. It seems like it's due to this - github.com/blueimp/jQuery-File-Upload/wiki/…. Know of any workarounds? – Discriminator

@chris it's been a while since I looked at this and I'm not 100% sure I understand the issue you're seeing . But I just checked my code and I'm accessing the upload like this in the on('fileuploaddone', function(e, data) {...} callback like so: file = data.files[0] – Thora