File upload field in EXTJS MVC

Question

Am having a form which consists of various text fields and combo boxes, along with a fileupload field. the file is being uploaded successfully, but when am trying to access the other form fields, they are not seen in the post parameters in the firebug. The code for the controller is given below:

uploadFile : function(button) {

    **var form = button.up('form');
    var Title = form.down('Title');
    console.log(Title);** // This returns null

    if (form.getForm().isValid()) {
        form.getForm().submit({

            url : 'data/Downloads.aspx',
            waitMsg : 'Saving the file...',

            params : {
                mode : 'UPLOADFILE',
                client : SYSTEM.CLIENT
            },

            success : function(f, a) {
                Ext.Ajax.request({

                    url : 'data/Downloads.aspx',
                    params : {
                        mode : 'SAVE',
                        fileName : a.result.fileName

                    },

                    success : function() {
                        this.mWin = Ext.create('Campus.view.GenMessage');
                        this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt2);
                    },

                    failure : function() {

                    }
                });

            },

            failure : function() {

            }
        })
    }
},

How do i access the other form fields and send it to the server.

check http://stackoverflow.com/questions/13125148/extjs-file-upload-using-json-service — Jom, Nov 08 '12 at 05:56

score 2 · Accepted Answer · answered Nov 08 '12 at 03:18

I don't quite follow what you are doing. You seem to submit the form and then you are doing an ajax call to the server ???

Regardless, all form fields are sent to the server together with the file input. The framework does not use ajax to submit the form as usual because of the file upload, see the docs on this: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload

score 0 · Answer 2 · answered Nov 22 '12 at 11:41

Thanks you for your guidance dbrin.

Actually, i was trying to uplaod a document, and at the same time save the information regarding the file in the database. And, thats why i was trying to make an AJAX request. But, here is what i did:

uploadFile : function(button) {

        var form = button.up('form');

        if (form.getForm().isValid()) {
            form.getForm().submit({

                url : 'data/Downloads.aspx',
                waitMsg : 'Saving the file...',

                params : {
                    mode : 'UPLOADFILE',
                    client : SYSTEM.CLIENT

                },

                success : function(form, a) {
                    this.mWin = Ext.create('App.view.GenMessage');
                    this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt1);


                },

                failure : function() {

                }
            })
        }
    },

File upload field in EXTJS MVC

2 Answers2