[2.x] response empty with file upload Ext.Ajax.request

[zquirm]

I'm using Ext.Ajax.request to submit a file upload form to work with the Scribd API to upload a document.

The upload works fine, but the response object is returning empty:

    {
         argument: undefined,
         responseText: "",
         responseXML: undefined
    }

Using both Firebug and Safari's developer console, I think the problem is that for some reason the "document" in the iframe used to submit the form is undefined.

When I remove the "x-hidden" class from the iframe, Scribd's return XML is there:

    <rsp stat="ok">
      <doc_id>123456</doc_id>
      <access_key>key-rvfa2c82sq5bf9q8t6v</access_key>
      <secret_password>2jzwhplozu43cyqfky1m</secret_password>
    </rsp>

and it's encoded:

    <?xml version="1.0" encoding="UTF-8"?>

I can't figure out why Ext.Ajax.request can't read the XML in the callback function.

It's this function in Ext.data.Connection.doFormUpload that's causing the problem:

    function cb(){
            var r = {  // bogus response object
                responseText : '',
                responseXML : null
            };

            r.argument = o ? o.argument : null;

            try { //
                var doc;
                if(Ext.isIE){
                    doc = frame.contentWindow.document;
                }else {
                    doc = (frame.contentDocument || window.frames[id].document);
                }
                if(doc && doc.body){
                    r.responseText = doc.body.innerHTML;
                }
                if(doc && doc.XMLDocument){
                    r.responseXML = doc.XMLDocument;
                }else {
                    r.responseXML = doc;
                }
            }
            catch(e) {
                // ignore
            }

            Ext.EventManager.removeListener(frame, 'load', cb, this);

            this.fireEvent("requestcomplete", this, r, o);

            Ext.callback(o.success, o.scope, [r, o]);
            Ext.callback(o.callback, o.scope, [o, true, r]);

            setTimeout(function(){Ext.removeNode(frame);}, 100);
        }

Thoughts?

[jsakalos]

Do you use standard Ext way to upload the file or you have your own routine? I'm asking, because Ext uses hidden iframe with form to upload files, Ajax cannot be used.

You can also take a look at http://filetree.extjs.eu FileUploader class.

[zquirm]

I'm using Ext's way (Ext.Ajax.request with isUpload set to true). When I remove the "x-hidden" class from the iframe, the XML response is there, so the upload is happening, but the Ajax request response returns empty.

[jsakalos]

Do you return header "Content-Type: text/html; charset=utf8"? Is the body of response {"success":true}?

[aconran]

zquirm -

This is a bug in Ext 2.2.1 and has been fixed in SVN. Look for it to be resolved in the next release of Ext 2.x. (2.2.2).

[zquirm]

Aaron, are there specific files I can copy from the SVN to make this work now? I tried copying the code from Ext.data.Connection to override what's currently there, and I'm still getting an empty response.

[aconran]

Update src/widgets/form/Action.js

[zquirm]

I'm still getting an undefined response.

Aaron, looking at this "bug fix" from the forum thread you attached, it looks like this function has been changed in Ext.form.Action:

processResponse : function(response){
        this.response = response;
        if(!response.responseText &&!response.responseXML){
            return true;
        }
        this.result = this.handleResponse(response);
        return this.result;
    }

This just seems to stop any error reading from going on.

The problem I'm having is that the "response" argument of this function is returning an object with responseText as empty and responseXML as undefined.

Which takes me back to the cb() function in Ext.data.Connection.doFormUpload, written out in the first post above, which is telling me that frame.contentDocument and window.frames[id].document do not exist.

I'm using the Scribd API to upload a document, which is working (the document does upload), and this is the iframe's response:

<?xml version="1.0" encoding="UTF-8"?>
<rsp stat="ok">
  <doc_id>15345909</doc_id>
  <access_key>key-xxxxxxxxxxxxxxxxxxxxx</access_key>
</rsp>

Why can't Ext.data.Connection.doFormUpload read the document?

[jsakalos]

You could step into callback function to see what's happening. From Ext.data.Connection:

function cb(){
            var r = {  // bogus response object
                responseText : '',
                responseXML : null
            };

            r.argument = o ? o.argument : null;

            try { //
                var doc;
                if(Ext.isIE){
                    doc = frame.contentWindow.document;
                }else {
                    doc = (frame.contentDocument || window.frames[id].document);
                }
                if(doc && doc.body){
                    r.responseText = doc.body.innerHTML;
                }
                if(doc && doc.XMLDocument){
                    r.responseXML = doc.XMLDocument;
                }else {
                    r.responseXML = doc;
                }
            }
            catch(e) {
                // ignore
            }

            Ext.EventManager.removeListener(frame, 'load', cb, this);

            this.fireEvent("requestcomplete", this, r, o);

            Ext.callback(o.success, o.scope, [r, o]);
            Ext.callback(o.callback, o.scope, [o, true, r]);

            setTimeout(function(){Ext.removeNode(frame);}, 100);
        } 

[zquirm]

I have.

doc = (frame.contentDocument || window.frames[id].document);

doc is undefined in both Firefox and Safari.