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)

Randa

Maybe id is not passed to action? – Blount

That is what is breaking but this works just fine in FF and chrome. IE gets the 500 error that the parameter is null when it expected an int – Randa

Using a JS debugger, can you check whether the value of additionalParams when you call .fileupload() is what you'd expect? (I.e. the same in IE and in FF/Chrome.) – Heterotopia

It seems you are using HMTL5 for uploading the files and as IE browsers 9,8,7 are not HTML5 compatible so they are not supporting the feature. – Bocage

What makes it look like I am using HTML5? – Randa

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.

Randa

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.

Charwoman

I stepped through this and my variable d is an object and the parameter name and value are both provided. The call is not even being registered. It is like it does not know how to submit this form. – Randa

@Randa I hope you are checking each variable value in IE console. and also compare those variable results with other browser's console results. I am sure that this will solve your problem. – Charwoman

I am. In firefox the object is the same as in IE except IE has the object as an array where as FF its on the first layer. Is that presentation something unique to IE how they display object properties? – Randa

@Randa Keep debugger in your code. and go to script tab in your IE development tool. type the name of the variable in the textfield which is present at bottom right of the developer tool. – Charwoman

When I do that, it says [[object Object]] { [0] : {...} } I attached an image of what I see when I hover over the object – Randa

@Randa Is the d variable's value differ in IE compare to other browsers? We can Chat about this topic here. – Charwoman

Answer 3

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

This should work for all browsers.

Pyrochemical

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

Polymath

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

Graviton

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.

Confraternity

The functionality of the uploader works with IE6+, some special features only work with IE10+. I suggest you re-read the docs. – Riant