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
– Neshta, Commented Jun 4, 2014 at 9:01
@shaunakde, jQuery File Upload supports ie 6.0+ github.com/blueimp/jQuery-File-Upload/wiki/Browser-support — Neshta
– Neshta, Commented Jun 4, 2014 at 9:04

Community · Accepted Answer · 2017-05-23 11:46:09Z

20

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

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jun 4, 2014 at 19:29

Neshta

2,7752 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sumitkm Over a year ago

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

Immutable Brick · Accepted Answer · 2015-08-24 09:22:56Z

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, 2015 at 9:22

answered Dec 19, 2014 at 9:45

Immutable Brick

83013 silver badges23 bronze badges

2 Comments

Immutable Brick Over a year ago

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

MK_Dev Over a year ago

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.

Collectives™ on Stack Overflow

jQuery File Upload doesn't send a file in IE9

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related