PDA

View Full Version : Can't handle server response from a FileUpload



salvo
18 Nov 2009, 5:42 AM
Hi,

I've read the docs and forum posts of similar issues but I'm unable to sort this out :(

What I want to achieve
Have a file upload form submitting file to server then handling a JSON response for extra process.
I'm using FileUploadField extension and ExtJS 3.0.2

Upload form

var uploadForm = new Ext.FormPanel({
fileUpload : true
,monitorValid: true
,items: [{
xtype : 'fileuploadfield'
,id : 'form-file'
,name : 'filepath'
,buttonText : ''
},{
xtype : 'hidden'
,name : 'service'
,value : App.user.service
}]
,buttons : [{
text : 'Upload'
,formBind: true
,handler: function(){
if(uploadForm.getForm().isValid()){
uploadForm.getForm().submit({
url : 'http://www.extjs.com/deploy/dev/examples/form/file-upload.php'
,method : 'POST'
,waitMsg: App.label.msgUploadFile
,success: function(fp, o){
console.log(o.response) // returns an empty object
}
});
}
}
}]
});

Server response

Content-Type is set to "text/html; charset=UTF-8" as verified in Firebug's Net tab.

I tried various response formats:


<html><body>{success:true, file:"a.gif"}</body></html>

or


<html><body><textarea>{success:true, file:"a.gif"}</textarea></body></html>

or


{success:true, file:"a.gif"}

Issue

Upload is OK but I have an issue handling the response.
console.log(o.response) returns an empty responseText from the success method while I was excepting to get something from the JSON.

argument : undefined
responseText : ""
responseXML : null

From the docs

The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a responseText property in order to conform to the requirements of event handlers and callbacks.

What the hell am I doing wrong?


Thank you for any help,
salvo

hendricd
18 Nov 2009, 5:49 AM
What the hell am I doing wrong?


If you want to evaluate a response body from the upload, use a class designed to do that:

Ext.Ajax.request has an upload configuration for passing forms. Check it out.

smarttdv
18 Nov 2009, 7:41 AM
For Response,

{success:true, file:"a.gif", message:"upload a.gif successfully"}


In Extjs,

console.log(o.result.file);
or
console.log(o.result.message);

salvo
18 Nov 2009, 7:45 AM
Thanks for helping Doug.


However before moving to the Ajax way I'd like to understand why the ExtJS example http://www.extjs.com/deploy/dev/examples/form/file-upload.html is working and not my code.


The example uses the same non-XHR form submit mechanism that can actually handle the response text as the Ext.form.BasicForm and Ext.data.Connection docs describes

The response text is retrieved from the document, and a fake XMLHttpRequest object is created containing a responseText property in order to conform to the requirements of event handlers and callbacks.

Also Evant and Condor highlighted the way to go for a non-XHR https://www.extjs.com/forum/showthread.php?t=83354

They say response must be




<html><body>{success:true, file:"a.gif"}</body></html>



but it's not working for me. Also note the live example is returning a different format which is not supposed to work!

{success:true, file:"a.gif"}

But this one is not working for me neither locally (3.0.2) while content-type and returned JSON string seem ok.

I'm totally confused :-?

Any other idea?

Animal
18 Nov 2009, 7:47 AM
It's all debuggable. You have the source code and can see exactly what it does with the resulting iframe document.

salvo
18 Nov 2009, 8:10 AM
@smarttdv

Unfortunately o.result is undefined I get o.response instead with empty responseText property

Condor
18 Nov 2009, 8:15 AM
Does this happen on all browsers?

This is a know problem for Opera 10 (see here (http://www.extjs.com/forum/showthread.php?p=390215#post390215)).

salvo
18 Nov 2009, 10:09 AM
I think I got it. For some reason my HTTP request pointed to a different domain 8-|

So standard form submit was OK, server response was OK but I guess that the ExtJS magic retrieving response from the document and turning it into a fake XMLHttpRequest was silently failing (cross domain connection failure?).

Anyway I get my o.result property back and the following string with no HTML tag seems to satisfy IE both FF (like the fileuploadfield example)

{success:true, file:"a.gif"}

A big thanks to the community,
Salvo