10

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.

Community
  • 1
  • 1
Saeed Neamati
  • 35,341
  • 41
  • 136
  • 188
  • 3
    **Notes:** I have to use Ext JS in this project, and as a web developer I truly hate it. Documentation really sucks. Help over net is not that much. Learning curve is a big problem. Styling web almost becomes a nightmare, it's not developer friendly, etc. – Saeed Neamati Jan 01 '13 at 11:43
  • 2
    That's another reason I hate Ext JS. Post a question about jQuery and you receive ten answers in half an hour. Post an Ext JS question, and you end up like this. – Saeed Neamati Jan 01 '13 at 11:59
  • 2
    The answer is clearly there in the documentation. Nowhere does it say the success/failure are configs of the form.Panel or form.Basic. Rather, they are passed to the submit method as demonstrated: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-submit – Evan Trimboli Jan 01 '13 at 20:36

3 Answers3

11

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"}';
}
bhutten
  • 526
  • 3
  • 5
3

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
Stephan
  • 31
  • 1
-1

Actually, this is well covered by docs for Ext.form.Panel and Ext.form.Basic. The problem with your code not working is that there are no config options "success", "failure" for the form panel. You should put them in the config object passed to the submit action. So your code should look like:

new Ext.FormPanel({
    fileUpload: true,
    frame: true


}).getForm().submit({
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
});

Note the difference: In Ext 4, there is a form component (Ext.form.Panel) which is basically a view component concerned with how you form looks, and then there is the underlying form class (e.g. Ext.form.Basic) concerned with the functionality. Form submissions are handled by Ext.form.Basic (or whatever returned by your form.getForm()).

Richard Laffers
  • 89
  • 1
  • 5
  • The formpanel inherits the submit method (helper function), which is why this answer was voted down by someone. – Dawesi Dec 28 '18 at 14:48