IE tries to download json response while submitting jQuery multipart form data containing file

StackOverflow https://stackoverflow.com/questions/8151138

Question

I'm trying to submit a form with a file field in it via jQuery.Form plugin, here's the code:

$('form').ajaxSubmit({
  url: "/path",
  dataType: "json",
  contentType: "multipart/form-data"
...

The server then returns json as a response. Works great in all browsers except IE, which tries to download the response as a file. If I remove the file field from the form, it also works just fine.

I've seen various solutions here and in Google and basically tried almost everything described, including setting enctype for the form via jQuery, but it didn't work.

Any suggestions would be very welcomed.

Was it helpful?

Solution 2

I have not found a direct solution to this, but I eventually implemented the following workaround: I used dataType: "text" in my ajax settings and then returned plaintext from controller, separating values with ; and parsing them on the client side. That way IE and Forefox stopped trying to download a response.

I did not find any other way to prevent said behavior other then to return plaintext. I tried returning JSON as plaintext and then parsing it with $.parseJSON, but it didn't work due to some js errors.

OTHER TIPS

You can simply return JSON from the controller as "text/html" and then parse it on the client side using JQuery.parseJSON().

Controller: 

    return this.Json(
            new
                {
                    prop1 = 5,
                    prop2 = 10
                }, 
            "text/html");

Client side:

jsonResponse = $.parseJSON(response);

if(jsonResponse.prop1==5) {
     ...
}

This solution has been working for me.

Just send response with 'Content-Type', 'text/html' header.

Just set Content-Type: text/html

This happens because IE8 doesn't recognize application/... mimetype. This works for me.

Hope it helps.

Same situation than you folks : the problem only occurs with enctype="multipart/form-data" form used with $(form).ajaxSubmit(...) function.

My team and I had to replace (in this function) dataType: 'json' option with dataType: 'text' and add responseText = $.parseJSON(responseText); to force server response parsing.

Of course we also had to step in server side to return a response with "text/plain" header instead of "application/json"

We're not proud of it :( IE is definitely killing everything...

I didn't try the advice given by zmonteca (already spent too much time on it) but it seems worthy : let us know if it was OK for you.

Hope it helps!

if you work with Zend you can do

$this->getResponse()->setHeader('Content-Type', 'text/html');

in your controller action. and on client-side, in case of jQuery, you can do 

data = $.parseJSON(data);

This site has some info about wrapping the response in a http://forum.jquery.com/topic/jquery-form-malsup-ie7-file-download-security-warning-on-ajax-file-upload

I seemed to be able to fix my problem by making my server return the JSON as a string. Then I used JSON.parse() inside the complete event.

I came up with the following workaround (in Zend Framework):

if (!$this->_request->isXmlHttpRequest()) {
    die('<textarea>'.Zend_Json::encode($data).'</textarea>');
}
$this->view->assign($data);

Removing ContentType from serverside works for me.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top