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!

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

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.

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.