CODEWITHSUNDEEP
javascriptjqueryinternet-explorerfile-uploadblueimp
Neshta
Neshta

Reputation: 2745

jQuery File Upload doesn't send a file in IE9

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?

Upvotes: 12

Views: 20561

Answers (2)

Immutable Brick
Immutable Brick

Reputation: 820

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.

Upvotes: 4

Neshta
Neshta

Reputation: 2745

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

Upvotes: 20

Related Questions