jQuery File Upload doesn't send a file in IE9

Question

I have got such problem only in IE < 10. My sources:

$("input:file#upload-photo").fileupload({
    enctype: "multipart/form-data",
    url: $("input:file#upload-photo").attr("url"),
    autoUpload: true,
    send: function() {
        spinner.spin(target);
    },
    done: function (e, data) {
        spinner.spin(false);

        var errors = data.result.Errors;
        if (errors != null && errors.length > 0) {
            for (var i = 0; i < errors.length; i++) {
                var ul = $("<ul>").html("<li>" + errors[i] + "</li>");
                $('#upload_photo_errors').html(ul);
            }
        } else {
            $(".profile-photo").attr("src", data.result.Data.AvatarUrl);
        }
    },
    error: function() {
        spinner.spin(false);
    }
});

The 'send' handler is invoked and the 'error' handler is too.

I caught my request in Fiddler. It has no Content-Type and any data:

POST http://172.20.40.45/site/api/Users/Avatar HTTP/1.1
X-Requested-With: XMLHttpRequest
Accept: */*
Referer: http://172.20.40.45/site/Profile/Edit
Accept-Language: ru
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Host: 172.20.40.45
Content-Length: 0
DNT: 1
Connection: Keep-Alive
Pragma: no-cache
Cookie: ...

I have tried to check the uploading proccess on the http://blueimp.github.io/jQuery-File-Upload/. It works fine in IE9. Why does it not work in my case?

Timepiece

caniuse.com/fileapi check this – Abet

@Dwza, it is not a good solution for me. We support ie 9 in our project. – Timepiece

@shaunakde, jQuery File Upload supports ie 6.0+ github.com/blueimp/jQuery-File-Upload/wiki/Browser-support – Timepiece

Answer 1

I have solved this issue. At first I solved the problem with multipart/form-data payload. IE9 doesn't support XHR file upload. Therefore I added next script:

<script src="~/Scripts/jquery.iframe-transport.js"></script>

Also I added another script specially for IE9:

<!--[if lt IE 10]>
<script src="~/Scripts/jquery.xdr-transport.js"></script>
<![endif]-->

Now the browser uploads the file. But I faced another problem. This time I had such problem. I use Web API and I found this solution which helped me.

But now the 'error' handler is invoked instead of 'done'. For solving this issue we must set dataType to 'json'. The final version looks so:

$("input:file#upload-photo").fileupload({
    dataType: "json",
    url: $("input:file#upload-photo").attr("url"),
    autoUpload: true,
    send: function() {
        spinner.spin(target);
    },
    done: function (e, data) {
        var errors = data.result.Errors;
        if (errors && errors.length) {
            var items = $.map(errors, function (i, error) {
                return $("<li>").text(error);
            });
            $("<ul>").append(items).appendTo('#upload_photo_errors');
        } else {
            $(".profile-photo").attr("src", data.result.Data.AvatarUrl);
        }
    },
    always: function() {
        spinner.spin(false);
    }
});

Timepiece

Thanks for posting your solution. Saved me a few hours on a Sunday :) – Gorse

Answer 2

The problem for me was that IE9 does not send the file if you trigger the file input through JS, the user actually needs to click the browse button for it work.

Normy

Not that I am aware off, I had to modify the script so the user clicks the browse button. – Normy

Yea, looks like triggering it through JS is not an option. However, using a label and setting the right "for" attribute solved it for my needs. – Darling