File upload with Firefox

[xinxin]

Hi all,

I am using Extjs 3.x, and below is the code I wrote for uploading files, it works fine on IE and Chrome, but it does not work on Firefox. It seems like firefox only shows one form textfield. I don't know why, so I wonder if anyone had this kind of issue before?

Thanks

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: 'File Upload Form',
        autoHeight: true,
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 50,


        items: [{
                    xtype: 'textfield',
                    id: 'form-file1',
                    emptyText: 'Select a file',
                    fieldLabel: 'File 1',
                    name: 'importFile1',
                    inputType:'file',
                    anchor:'95%',
                    buttonText: 'Browse'
                  },
                  {
                    xtype: 'textfield',
                    id: 'form-file2',
                    emptyText: 'Select a file',
                    fieldLabel: 'File 2',
                    name: 'importFile2',
                    inputType:'file',
                    anchor:'95%',
                    buttonText: 'Browse'
                  },
                  {
                       xtype: 'textfield',
                    id: 'form-file3',
                    emptyText: 'Select a file',
                    fieldLabel: 'File 3',
                    name: 'importFile3',
                    inputType:'file',
                    anchor:'95%',
                    buttonText: 'Browse'
                  },
                  {
                       xtype: 'textfield',
                    id: 'form-file4',
                    emptyText: 'Select a file',
                    fieldLabel: 'File 4',
                    name: 'importFile4',
                    inputType:'file',
                    anchor:'95%',
                    buttonText: 'Browse'
                  },
                  {
                       xtype: 'textfield',
                    id: 'form-file5',
                    emptyText: 'Select a file',
                    fieldLabel: 'File 5',
                    name: 'importFile5',
                    inputType:'file',
                    anchor:'95%',
                    buttonText: 'Browse'
                  }], //Items,
        buttons:[{
            text: 'Save',
            handler: function(){
                if(fp.getForm().isValid()){
                    fp.getForm().submit({
                        url: 'file-upload.php',
                        waitMsg: 'Uploading your photo...',
                        success: function(fp, o){
                            msg('Success', 'Processed file "'+o.result.file+'" on the server');
                        }
                    });
                }
            }
        },{
            text: 'Reset',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });
    
});p1.jpgp2.jpg

[xinxin]

Hi,

I just solved this issue by using FileUploadField.js

Thanks

[Oliver Scott]

Hi,

I tried the file upload functionality using the FileUpload.js in FireFox but it doesn't work.
It simply doesn't recognize the json response
{"success":true}
and so doesn't call back the success handler.

[hoalien89]

thanks for share, it's useful for me