Error: [object Error] in Internet Explorer

[carlospictor]

Great project, thank you!

However, I'm trying to implement the uploader. It works perfectly in FF, Chrome and Safari, but IE7, 8, 9 all fail to load the JSON response correctly.

My server-side uploader is correctly making the images on the server, but IE only returns Error: [object Error] highlighted in red, rather than the JSON return of thumbnail, url etc.

Are there any tips or guidance you can supply on trying to resolve or debug this IE only issue?

[carlospictor]

Using the debug tools, I'm able to see that IE receives the JSON response, with the correct Header of "text/plain" and a JSON string as follows:

[{"name":"3627","size":171171,"url":"heritage1003627.jpg","thumbnail_url":"heritage1003628.jpg","delete_url":"upload-handler?file=3627","delete_type":"DELETE"}]

This appears to be well formed, and indeed other browsers are able to render it correctly.

I'm using Jquery 1.6.4 and jquery ui 1.8.12
All file upload scripts were downloaded from here yesterday, so should be up-to-date.

[blueimp]

What I would do is check the response object data.result here:
https://github.com/blueimp/jQuery-File-Upload/blob/master/jquery.fileupload-ui.js#L100
In IE9, you could add a console.log(data.result) statement.

If this doesn't help, you could check the response object right here, in the iframe transport:
https://github.com/blueimp/jQuery-File-Upload/blob/master/jquery.iframe-transport.js#L52

[carlospictor]

Using the most basic implementation of the plug-in, as documented here:
https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

Which doesn't use jquery.fileupload-ui.js, I have got a very basic version working in all browsers, except IE. IE receives the correctly formatted JSON response, but then simply doesn't do anything with it and the code to append the file.name to the body just doesn't execute.

I've tried putting a console.log(response) statement and even an alert(response) into the iframe-transport file, but still nothing.

[carlospictor]

Further update, setting

forceIframeTransport: true

And testing in Firefox, the console.log(data.result) in my initialization script, and the alert(response) in iframe-transport both get called.

From IE, neither of these get called and yet the Network profiler in IE9 shows the request being sent and the JSON Response being returned.

Any ideas on how to debug this further? I'd really like to use this uploader if I can, but I'm not sure how to trace this error.

[carlospictor]

Further fact finding.

If I set up the initialisation as follows:

$('#fileupload').fileupload({
dataType: 'iframe',
forceIframeTransport: true,
url: 'uploader.php',
done: function (e, data) {
$.each(data.result, function (index, file) {
$('

').text(file.name).appendTo('#imagebox');
});
}
});

Then the 'done' function gets called, but data seems to be the entire jQuery library. In IE, only by setting dataType to iframe, and forceIframeTransport to true can I get the 'done' function to be executed - but data does not contain the JSON response, which I can see is still being returned from the Network Profiling.

Amy ideas? I'm pretty stumped to understanding what's going on here.

[bhbryant]

Carlos,

Use dataType: 'json', in the config hahs, this will get translated to "iframe json" when iframe transport gets triggered and will cause the converters to be used,

[guyarmitage]

Hi All,

Loving the project! I'm having the same issue and was trying to establish if Bryant's solution worked for you Carlos.

My symptoms are the exact same as you, IE see the response but doesn't react to it. I played around with MIME types for a while and painfully changed the variables one by one to test them.

I Bryant's response worked could I have a few more details, I'm not sure where to put the dataType 'json' string (is it in the jquery.fileupload-ui.js? and if so should I change my response from the server back to MIME 'application/json'?)

[carlospictor]

Hi,

I traced it down as far as a conflict with TinyMCE for IE only. As time was running so short, I specified to the users (as it's only for 3 people to update a website) that they should use Firefox or Chrome.

I do really want to use this uploader for future projects, but need to make it work with TinyMCE somehow.

[guyarmitage]

Thanks for the response, I'll take another look, and keep you up-to-date with what I've tried so far, see if we can get the ball rolling on this issue

[guyarmitage]

{I don't use TinyMCE so the error must lie elsewhere, if indeed it's the same issue}

[carlospictor]

I think it's something to do with cross-domain requests. As far as I can see, IE is the only browser that falls back to the iframe transport method. Sadly, I am not clever enough to uncover exactly where this is going awry when I implement it locally...

[eefi]

We fought with some JSON-response-related IE issues and found a workaround, so I thought I'd add the information to this bug in case it's helpful for someone.

IE7 does not like getting MIME type "application/json" as the contents of an iframe, so when we were trying to send back properly MIME-typed raw JSON in response to an iframe upload, it would pop up a bar at the top of the window saying "To help protect your security, Internet Explorer blocked this site from downloading files to your computer. Click here for options..." Also, control would never get returned to jQuery to process the contents of the iframe.

We then attempted to return the raw JSON as MIME type "text/plain". Unfortunately, when jQuery attempts to access the contents of the iframe through JavaScript (see jquery.iframe-transport.js:146), IE actually attempts to interpret the raw JSON as HTML. Since we were sending back HTML inside a string inside our JSON, that was breaking because IE was eating our HTML tags.

The final solution we found was to add another HTML encoding layer. Thus, on the server side, we took the raw JSON string, HTML-escaped it, and sent it back with MIME type "text/html". Then, in our fileupload setup, we did

$('#fileupload').fileupload({
  // fileupload options as before

  // Unwrapping HTML-encoded JSON required for IE's iframe transport.
  dataType: 'iframejson',
  converters: {
    'html iframejson': function(htmlEncodedJson) {
      return $.parseJSON($('<div/>').html(htmlEncodedJson).text());
    },
    'iframe iframejson': function (iframe) {
      return $.parseJSON(iframe.find('body').text());
    }
  }
};

Note that we unconditionally HTML-escaped our response regardless of client, so we had to handle both modern clients (which go through the "html iframejson" converter) and clients like IE7 that have to fall back on using an actual iframe (which go through the "iframe iframejson" converter).

We were able to test this working on IE7 (Windows XP), IE8 (Windows XP), IE9 (Windows 7), Firefox 3.6 (Linux), Firefox 8 (Linux), and Chromium 15 (Linux).

[guyarmitage]

Fantastic thanks for the info, I'll take a look into it on my side, a little busy at the moment, but as soon as I've tried it I'll give it a review. Thanks espeoneefi

[gthamizh]

i also had this same problem in IE8. When i changed jQuery version from 1.7 to 1.6.8 i got clear error message after uploaded a file. It shows there was a problem in redirection. Then i put result.html in my root directory. After that this issue has been resolved.

[blueimp]

result.html is only needed for cross-domain iframe transport file uploads.