Submit Form with Upload functionality not working - Extjs

Question

Below is my popup window onclick of a button. After choosing and clicking the Upload button I am unable to submit the form.

function uploadStockDetails(){
    try{
        var stockAuditUploadFile = Ext.widget('window', {
        title: 'Upload the Stock Audit file',
        closeAction: 'hide',
        width: 400,
        autoHeight: true,
        layout: 'fit',
        resizable: false,
        modal: true,
        items: [{
            xtype: 'filefield',
            name: 'file',
            fieldLabel: 'File',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Browse'
        }],
        buttons: [{
            text: 'Upload',
            handler: function() {
                alert('asdhj');
                var form = stockAuditUploadFile.getForm();
                alert(form);// not reachable. No alert appearing.
                if(form.isValid()){
                    form.submit({
                        url: 'StockAuditUpload',
                        waitMsg: 'Uploading your file...',
                        success: function(fp, o) {
                            Ext.Msg.alert('Success', 'Your file has been uploaded.');
                        }
                    });
                }
            }
        }]
    });
    stockAuditUploadFile.show();
    } catch(e) {
        alert("Exception in uploadStockDetails"+e.message);
    }
}

The other ways I tried to submit the form were
this.up('form').getForm();
this.prev('form').getForm();
this.ownerCt.down('form').getForm();

All the above methods didn't give me desired results. I feel that I have made a mistake in creating the window and that I should create a form rather.
Can anyone please suggest?

Yes, I did, it just says `this.up('form').getForm();` `this.prev('form').getForm();` `this.ownerCt.down('form').getForm();` are undefined or null — Freakyuser, Oct 24 '14 at 13:03
@SanKrish is there any mistake in the formation of the form or window? — Freakyuser, Oct 24 '14 at 13:05
No it is valid , you can create a window like that. i guess your js library may not loaded during the getForm() method — Santhosh, Oct 24 '14 at 13:14
i am not sure . you can find something useful here http://dev.sencha.com/deploy/ext-4.0.0/examples/form/file-upload.html and http://stackoverflow.com/questions/2514937/file-upload-using-ext-js — Santhosh, Oct 24 '14 at 13:22
@SanKrish instead of submitting the form, shall I make an Ajax request to the url and call the java method? — Freakyuser, Oct 24 '14 at 13:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/63588/discussion-between-san-krish-and-freakyuser). — Santhosh, Oct 24 '14 at 13:26

score 0 · Answer 1 · answered Jun 02 '16 at 06:53

I have tried the bellow code for file-upload in ExtJS

Hope it might help you.

function uploadStockDetails(){
try{
   var stockAuditUploadFile = Ext.create('widget.window',{
        title:'Upload the Stock Audit file',
        closeAction: 'hide',
        width: 400,
        autoHeight: true,
        layout: 'fit',
        resizable: false,
        modal:true,
        items : [
                    self.stockAuditUpload(),
                ]
        });
    stockAuditUploadFile.show(this,function(){
    });
} catch(e) {
    alert("Exception in uploadStockDetails"+e.message);
}
}

this.stockAuditUpload = function(){
var fileUploaddata = {
    items:[{
    xtype: 'container',
    layout: {
        type: 'hbox',
        align: 'center',
        pack: 'center',
    },
items:[{
        xtype: 'form',
        maxWidth: 800,
        flex: 1,
        bodyPadding: '20 20 20 7',
        title: '',
            items: [{
xtype: 'filefield',
                        id: 'uploadFile',
                        name: 'uploadFile',
                        buttonText: 'Browse',
                        regex: (/.(gif|jpg|jpeg|png)$/i),
                        regexText: 'Only image files allowed for upload',
                        msgTarget: 'side',
                    }]
            }],
buttons: [{
                        text: 'Upload',
                        handler: function () {
                            var form = this.up('form').getForm();
                            var uplodedFile = Ext.getCmp("uploadFile").getValue();
                            // if you make console log of 'uplodedFile' you will get file path as C:\fakepath\filename.jpg
                            if (form.isValid()) {
                            form.submit({
                                url:// Provide Upload url Ex: uploadfile.php
                                //and add file functionality in php. so it will take file path as well as file name
                                waitMsg: 'Uploading your file...',
                                success: function(fp, o) {
                                    Ext.Msg.alert('Success', 'Your file has been uploaded.');
                                }
                            });
}else{
                                Ext.Msg.alert('Error', ' Please fill the Mandatory fields');
                            }
                        }
                    },{
                        text: 'Cancel',
                        handler: function () {
                            this.up('window').close();
                        }
                    }]
    }]
};
fileUploaddata;
};

score 0 · Answer 2 · answered Jun 02 '16 at 09:19

You have not created a form and directly creating a filefield inside window.For this reason , you are getting undefined/null.

In order to get the form , create a Ext.form.Panel object first and then the filefield as its item.

Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
    xtype: 'filefield',
    name: 'photo',
    fieldLabel: 'Photo',
    labelWidth: 50,
    msgTarget: 'side',
    allowBlank: false,
    anchor: '100%',
    buttonText: 'Select Photo...'
}],

buttons: [{
    text: 'Upload',
    handler: function() {
        var form = this.up('form').getForm();
        if(form.isValid()){
            form.submit({
                url: 'photo-upload.php',
                waitMsg: 'Uploading your photo...',
                success: function(fp, o) {
                    Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
                }
            });
        }
    }
}]

});

Submit Form with Upload functionality not working - Extjs

2 Answers2