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?

@Dwza, it is not a good solution for me. We support ie 9 in our project. — Neshta, Jun 04 '14 at 09:01
@shaunakde, jQuery File Upload supports ie 6.0+ https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support — Neshta, Jun 04 '14 at 09:04

score 20 · Accepted Answer · edited May 23 '17 at 11:46

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

Thanks for posting your solution. Saved me a few hours on a Sunday :) — sumitkm, Dec 21 '14 at 14:36

Immutable Brick · Answer 2 · 2015-08-24T09:22:56.500

4

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.

edited Aug 24 '15 at 09:22

answered Dec 19 '14 at 09:45

Immutable Brick

830
12
23

Not that I am aware off, I had to modify the script so the user clicks the browse button. – Immutable Brick Sep 07 '15 at 07:57
1

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. – MK_Dev Sep 08 '15 at 19:42

jQuery File Upload doesn't send a file in IE9

2 Answers2