Why success callback is not called in extjs form submission?

Question

I'm trying to upload a file using Ext JS forms and in case of success or failure, show appropriate messages. But I'm not able to get the desired result. I'm not able to make success or failure callbacks work in form.submit action.

What I've done till now is:

Creating a form with this script:

new Ext.FormPanel({
    fileUpload: true,
    frame: true,
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
}).getForm().submit()


​/*
    The response Content-Type is text/html (with charcode=utf8);
    The response JSON is: { "success": true }
*/​​

Setting the response Content-Type to text/html based on this answer.
Sending an appropriate JSON result back, based on Ext JS docs. The response captured via Fiddler is:

{"success":false}

or

{"success":true}

I even set the response Content-Type to application/json. But still no success.

I've read links like this and this, but none of them helped. Please note that I also tried another script which creates a form, with an upload field in it, and a save button, and I submitted the form in the handler of the save button. But still no callback is fired.

Answer 1

Here's a working example - Javascript code:

Ext.onReady(function () {

    Ext.define('ImagePanel', {
        extend: 'Ext.form.Panel',
        fileUpload: true,
        title: 'Upload Panel',
        width: 300,
        height: 100,

        onUpload: function () {
            this.getForm().submit({
                url: 'upload.php',
                scope: this,
                success: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Success: " + data.msg);
                },
                failure: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Failure: " + data.msg);
                }
            });
        },

        initComponent: function () {
            var config = {
                items: [
                    {
                        xtype: 'fileuploadfield',
                        buttonText: 'Upload',
                        name: 'uploadedFile',
                        listeners: {
                            'change': {
                                scope: this,
                                fn: function (field, e) {
                                    this.onUpload();
                                }
                            }
                        }
                    }
                ]
            };

            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.callParent(arguments);
        }
    });


    var panel = Ext.create('ImagePanel', {
        renderTo: Ext.getBody()
    });
});

And PHP code:

<?php
if (isset($_FILES)) {
    $temp_file_name = $_FILES['uploadedFile']['tmp_name'];
    $original_file_name = $_FILES['uploadedFile']['name'];

    echo '{"success": true, "msg": "'.$original_file_name.'"}';

} else {
    echo '{"success": false, "msg": "No Files"}';
}

Answer 2

I have been struggling with this for quite some time now as well. Here's my code:

Ext.getCmp('media-upload-form').getForm().doAction('submit', {
    url: './services/recordmedia/upload',
    method: 'post',
    waitMsg: 'Please wait...',
    params: {
        entityId: this.entityId,
    },
    failure: function(form, action){
        alert(_('Error uploading file'));
        this.fireEvent('file-upload');
        this.close();
    },
    success: function(form, action){
        this.fireEvent('file-upload');
        this.close();
    },
    scope: this
})

The response was always wrapped in <pre> tags by the browser, what caused the Extj lib not to call the callbacks. To fix this:

• make sure your server returns the correct json: {"success":true}
• make sure that the content-type is set to text/html