<pre>json</pre> in File upload response (FF only)

**beto.ch** · 12 Feb 2009 3:28 AM

i've a servlet to process the upload (spring), but how can i access to servlet response to change the contentType to text/html?

**Animal** · 12 Feb 2009 3:38 AM

http://java.sun.com/products/servlet...va.lang.String)

**ypcheng** · 6 Mar 2009 10:10 PM

after several hours of try and error, i got an solution that works in both ie and ff.

in your upload servelet:

response.setContentType("text/html");
response.getWriter().write("{success:true,path:'"+actualFilePath+"'}");

then in your js

form.getForm().submit({
url: '/upload',
waitMsg: 'Uploading your file...',
success: function(fp, o) {
alert(o.result.path)
}})

**Animal** · 7 Mar 2009 12:43 AM

Several hours instead of just reading the API docs?

http://extjs.com/deploy/dev/docs/?cl...form.BasicForm

Originally Posted by TFM

File Uploads

File uploads are not performed using Ajax submission, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM <form> element temporarily modified to have its target set to refer to a dynamically generated, hidden <iframe> which is inserted into the document but removed after the return data has been gathered.

The server response is parsed by the browser to create the document for the IFRAME. If the server is using JSON to send the return object, then the Content-Type header must be set to "text/html" in order to tell the browser to insert the text unchanged into the document body.

**Uberdude** · 26 May 2010 7:42 AM

A problem arrises if your json response contains html tags:

{"response":{"message":"Unable to <b>parse<\/b> CSV."},"success":false}

Note the escaped forawrd slash '\/' in the Javascript string literal. This string is made with org.json.JSONObject#toString and is the correct string that when eval-ed gives you the correct js object (when using normal Ajax instead of file upload works fine). The problem is once written into the dynamic iframe with the content type of text/html (which avoids the <pre> tags you get with text/plain) the browser realisess this isn't valid html and patches it up so that when you extract it with r.responseText = doc.body.innerHTML; in function cb in Ext.data.Connection.doFormUpload) you end up with:

{"response":{"message":"Unable to <b>parse<\/b> CSV."},"success":false}</b>

When this gets eval-ed Ext expodes (in Ext.util.JSON.decode) with "unterminated regular expression literal" due to the forward slash in the '</b>' the browser inserted on the end of of our text to make it valid html.

**Condor** · 26 May 2010 7:55 AM

Ext also supports sending the JSON back in a textarea, e.g.

Code:

<html><body><textarea>{"response":{"message":"Unable to <b>parse</b> CSV."},"success":false}</textarea></body></html>

No escaping required as long as your JSON doesn't contain '</textarea>'.

**Uberdude** · 26 May 2010 8:30 AM

Thanks for the quick reply Condor.

After writing my post I checked the Ext 3 docs (I'm on Ext 2.2.1) and saw that it does now mention escaping html.

The textarea fix is nice (and I'd always html escape contents to be safe, as Ext gets the .value rather than innerHtml you get right value), but not in Ext 2

. Another reason to upgrade!

**Surinder singh** · 15 Sep 2011 3:07 PM

Use the following header when u are sending the response from the server.

header('Content-Type: text/html'); //php

**ezzygemini** · 8 May 2012 6:37 AM

anyone found a solution?

**ezzygemini** · 8 May 2012 6:42 AM

Apparently Chrome is doing this too and I found the solution:
I switched the repsonse Content-Type on my JSON file to "text/json" instead of "application/json" (only when using the POST method).

It now works fine on my app.My guess is that is a security feature on some browsers.

<pre>json</pre> in File upload response (FF only)

Thread Tools

Search Thread

Display

tried and worked

tried and worked

solved!

solved!