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

[mpriatel]

I'm actually not 100% sure if this is an Ext bug or not, but I'm having problems with the following code (essentially handling a File Upload through a Ext.Window):

// ignore ${auto_var} -- it is part of a code generator

var ${auto_var}_form = new Ext.form.FormPanel({
  frame : true,
  defaultType : 'textfield',
  waitMsgTarget : true,
  bodyStyle : 'padding:5px 5px 0',
  labelAlign : 'left',
  buttonAlign: 'right',
  fileUpload : true,
  enctype : 'multipart/form-data',
  items : [
  {
    fieldLabel : 'Attachment',
    inputType : 'file'
  }
]
});

var ${auto_var}_submit = ${auto_var}_form.addButton({
  text:"Submit",
  handler: function()
  {
    ${auto_var}_form.form.submit({
      url:'upload',
      waitMsg : "Uploading...",
      success: function(f,a){
        console.log(a);
      }
  });
  }
})

Console reports:

[Break on this error] (<pre>{success:true}</pre>)

I know for 100% that I am not returning <pre> tags.

What is happening, I think, is that because the response happens in an IFRAME (because of File Upload, I presume), Firefox is automatically wrapping the response in a DOM, then the IFRAME content is pulled out and eval'ed.

My Spring controller simply returns:

res.setHeader("Content-type","text/javascript");
res.getWriter().write("{success:true}");
return null;

I've tried application/json, but this just prompts a File/download dialog.

The only fix I can think of is edit Ext's decode function to handle the <pre> tags:

this.decode = function(json){
   // check if there are <pre> tags and strip them out.
   return eval("(" + json + ')');
};

Any suggestions??

[sturdypine]

you should modify method 'decode' to get rid of tag '<pre> </pre>'.
and then everything will work well.
but i gotta another problem, uploadform works fine in FF, but fails in IE6.0.
IE cannot submit any request to ther server, and throw some js exception.
could you give me any clue??

[McCornic]

Any body know if this bug is going to be solve?
Because I have the same issue <pre>...</pre>.
And i think it's not clean to get rid of tag '<pre> </pre>'.
And it doesn't look work on IE6
Please the Ext team help us.... ;-)

[Animal]

Uploads are done using a form submit which loads an iframe.

It's expecting an HTML document. It gets the "responseText" by extracting the innerHTML of the document. That's what FF puts there. It wraps plain text responses with <pre> tags.

There was a long discussion about this with several workaruonds posted, but the dev team have not looked at it.

[Naneau]

Has any "official" method of getting around this surfaced yet? I too am facing this (rather annoying) problem.

[esoteric]

I do file uploads and I have never had this problem, it is all in the way you return the JSON formatted response, for whatever reason, the method being used her is wrapping it in <pre></pre> tags. If you don't return it with that then there is no problem. It isn't a bug.

[Naneau]

No, it really is a bug, I know for a fact that my returned json is *not* wrapped in any tags (I have checked and double checked). It seems to be the way Firefox handles content sent to the iframe used to do a file form submit. Fiddling with the response headers either triggers a file download box or the bug. Although, come to think of it, I have yet to try sending it as text/plain (which I'd rather not, seeing as how it's not correct)

[esoteric]

Interesting, well I will take back what I said, though I haven't seen this problem in my setup, I will have to mess around with it and see if I can duplicate, I suppose for now as suggested earlier, just strip the html tags before decoding.

[Naneau]

my search skills seem to have deserted me:

http://extjs.com/forum/showthread.php?t=8129

had the answer

[Animal]

Ah, I'd forgotten the conclusion there, and it's very useful. I will update the documentation to make this absolutely plain!