jQuery fileupload not working in IE 8 and 9

Question

This code works in FF and chrome. In IE 8 or 9 I get a 500 error saying a not null property is null.

Here is the html

<div id="upload_button_div_general" class="fileupload-buttonbar" data-url="/Upload/SomeMethod">
    <label class="fileinput-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button"> 
        <span class="ui-button-text">
            <span>Add Documents...</span> 
        </span>
        <input id="upload_button" type="file" name="postedFiles" multiple="" />
    </label>
</div>
<div id="UploadMessage" data-bind="visible: showMessage"> 
    <span>Documents</span>

    <ul data-bind="foreach: upload()">
        <li> 
            <a href="#" data-bind="click: $parent.openFile">
                <span data-bind="text: $data.fileName">  </span>
            </a>
        </li>
    </ul>
</div>

Here is the javascript

function Upload(div, additionalParams, successFunc, failureFunc) {
    $('#' + div).fileupload({
        dataType: 'json',
        url: rootPath + 'Upload/SomeMethod',
        formData: additionalParams,
        start: function (e, data) {
            showLoading();
        },
        stop: function (e, data) {
            hideLoading();
        },
        add: function (e, data) {
            data.submit();
        },
        always: function (e, data) {
            var result = data.result;
            if (result.HasError) {
                failureFunc(result.Error);
            } else {
                successFunc(result);
            }
        }
    });
};

The controller method is

public virtual JsonResult SomeMethod(IEnumerable<HttpPostedFileBase> postedFiles, int id)

Answer 1

I was able to get it working by including jquery.iframe-transport.js and then I had to remove my knockout "with" data-bind from the div to get it to work in IE8 because it worked in IE9. (I had a with binding above my posted code) Thanks for all the suggestions.

Answer 2

As this function is working fine in FF, there is only one possibility that the variables you are passing here are undefined just for IE.

Check each variables values in IE console.

Hint: IE is strict about types and everything.

For example:

parseInt(Number);  

FF and Chrome assumes it as decimal value whereas IE assumes it as octal number. So, giving parseInt(Number,10) is recommended.

And even regarding dates, if you provide

var currentDate = new Date("March 18, 2013 11:13:00")

Works good in Chrome and FF, but shows undefined or invalid Date in IE.

You can find more about the recommended notation of the date here

So, in the above examples I am just trying to say you that you may have forgotten to declare type , or correct notation .

Though, this is not the answer you were looking for, I hope this information will help you.

Update : As the error is 500 error , then the problem could be more possibly in rootPath variable's value.

Answer 3

Just set the content-type to text/html and send it as JSON.

This should work for all browsers.

Answer 4

            $("#txt1").fileupload({
            replaceFileInput: false,
            dataType: "json",        
            datatype:"json",
            url: "<%=Page.ResolveUrl("~/WebService/AddAttachment.ashx")%>",
            done: function (e, data) {
                $.each(data.result, function (index, value) {
             //You get the response data in here from your web service
                })
                $("#txt1").val("");
            }`enter code here`
        }); 

This is tested and working fine in both IE8 and IE9 + above. Please make sure to use the correct dataType:"json" (or datatype:"json") and also make sure your response of web service method is correct. Thanks

Answer 5

On IE if you return data like json when you upload a file you can get this data(json) like this:

done: function (e, datos)
{
try
{
   //This in FF, Chrome, Safari
   data=eval(JSON.parse(datos.result));
}catch (er)
{
    //This in IE
    data=eval(JSON.parse(datos.result[0].documentElement.innerText));
}

Answer 6

If by jQuery fileupload you mean using http://blueimp.github.com/jQuery-File-Upload/ then it clearly says in the browser support section that IE 10+ is required for every functionality they implemented.

https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

If you meant another plugin, just disregard my comment.