Success handler not getting called in file upload using extjs

Question

I have a J2EE web app with a form where I upload a file to a location on a server. During the upload a waitMsg is shown to the user which should disappear once the upload is completed with a msgBox indicating the same. The code for the success case is also provided in the js file. However the upload works fine, but the waitMsg continues even after the upload at the server has completed.
The js code is given:

Ext.onReady(function(){

    Ext.QuickTips.init();

    var msg = function(title, msg){
        Ext.Msg.show({
            title: title,
            msg: msg,
            minWidth: 200,
            modal: true,
            icon: Ext.Msg.INFO,
            buttons: Ext.Msg.OK
        });
    };

    var fp = new Ext.FormPanel({
        renderTo: 'fi-form',
        fileUpload: true,
        width: 500,
        frame: true,
        title: 'Upload XML Config File ',
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 50,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select the xml File to upload',
            fieldLabel: 'File',
            name: 'file',
            buttonCfg: {
                text: '',
                iconCls: 'upload-icon'
            }
        }],
        buttons: [{
            text: 'Upload',
            handler: function(){
                if(fp.getForm().isValid()){
                    fp.getForm().submit({
                        url: 'uploadXML.htm',
                        waitMsg: 'Uploading your xml file...',
                        success: function(fp, o){
                        msg('Success', 'Processed file "'+o.result.file+'" on the server');
                        }
                    });
                }
                if (!validateFileExtension(Ext.getDom('form-file').value)) {
                    Ext.MessageBox.alert('Select another file',
                    'Only XML file, please.');
                    return;
                    }
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });

    function validateFileExtension(fileName) {
        var exp = /^.*\.(xml|XML)$/;
        return exp.test(fileName);
        }

});

Not sure what I am missing.
Thanks in advance.

Answer 1

Had a similar problem. Found out that you need to set the content type to "text/html" on the page that handles the file upload. :-(

Response.ContentType = "text/html";

If you read the documentation for Ext.data.Connection, you will see that

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.

Took me a while to find this, but as I came across your question, someone else might do to with a similar problem!

hopefully this will help them!