jquery file upload - IE callback results in object

Question

All, I know that there is this question already out there: jquery file upload - IE done callback data.result issue

However, I'm having the same issue and don't know how to resolve it. I had some working code that looked like this (based on the recommendation in the other post):

if($.fn.wl_File) $.fn.wl_File.defaults = {
    forceIframeTransport: true,
    onDone: function (e, data) {
    var result = jQuery.parseJSON(data.result);
    var filename = result[0].name;
    }
}

Which extracts the callback information perfectly in Firefox, Chrome etc except for IE. However, I still get an [object Object] back from IE. I get the following results back when I do a console.log(data.result) in Chrome:

[{
"name": "1_3266_671641333369_14800358_42187036_5237378_n.jpg",
"size": 35535,
"type": "image\/jpeg",
"url": "\/web\/upload\/1_3266_671641333369_14800358_42187036_5237378_n.jpg",
"thumbnail_url": "\/web\/upload\/thumbnails\/1_3266_671641333369_14800358_42187036_5237378_n.jpg",
"delete_url": "\/web\/upload.php?file=1_3266_671641333369_14800358_42187036_5237378_n.jpg",
"delete_type": "DELETE",
"upload_type": "video_montage",
"insert_id": "288"
}]

I don't know how to resolve the issue. Based on my code, can anyone point me in the right direction?

FYI, I'm using the following theme: http://revaxarts-themes.com/?t=whitelabel which calls the jquery upload plugin and that's why my code looks a little different at the top but it's basically the same thing as the plugin code.

Any help is greatly appreciated on this frustrating issue!

Answer 1

console.log in IE is not fantastic as in other browser, it is normal to output object Object. What you can do is start the developer tools (F12) and add a breakpoint in the line:

 var result = jQuery.parseJSON(data.result);

For more details on how to debug: How do I dump JavaScript vars in IE8?

Also worth reading, use firebug lite: jQuery logging in IE: how to get object?

Answer 2

I found the solution to this from the post I mentioned in my question. However, I had to expand on it a little to satisfy the different browsers. The original answer was right about how to get the data from IE but that method didn't work for the other browsers. I had to add an if statement to see what my browser type was and proceed from there. My code to handle this scenario looks like the following:

if($.browser.msie){
    var data_to_parse = $( 'pre', data.result ).text();
}else{
    var data_to_parse = data.result;
}
var result = jQuery.parseJSON(data_to_parse);
var filename = result[0].name;

I can now manipulate the response I get from both IE and other browsers!