I have form panel in ext js. Inside form panel using xtype: filefield

How to get uploaded file.

If I use form will get getForm() method to get that file. Now, form is not available in ext js. I use to get values like that

var values = form.getValues();
if(form.validate())
{
   var name = values.name;
   var desc = values.desc;
}

file field file I need to get and stored to DB. In this filefield upload a mp3 file. Anyone can suggest a solution for it.

I have form panel in ext js. Inside form panel using xtype: filefield

How to get uploaded file.

If I use form will get getForm() method to get that file. Now, form is not available in ext js. I use to get values like that

var values = form.getValues();
if(form.validate())
{
   var name = values.name;
   var desc = values.desc;
}

file field file I need to get and stored to DB. In this filefield upload a mp3 file. Anyone can suggest a solution for it.

• javascript
• php
• extjs
• sencha-touch

2 Answers 2

You can use FileReader object to read the file. Below is the sample code to do it.

Ext.application({
    name : 'Fiddle',

    launch : function() {

        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            fullscreen: true,
            items: [{
                xtype: 'fieldset',
                title: 'My Uploader',
                items: [
                    {
                        xtype: 'filefield',
                        label: "MyPhoto:",
                        name: 'photo'
                    }, {
                        xtype: 'button',
                        text: 'Get File',
                        handler: function(){
                            let file = this.up().down('filefield').el.down('input[type=file]').dom.files[0];
                            var reader = new FileReader();

                            reader.onload = (function(theFile) {
                                return function(e) {
                                    let result = e.target.result;
                                    //process upload with result
                                    alert(result);
                                };
                            })(file);

                            reader.readAsBinaryString(file);
                        }
                    }
                ]
            }]
        });
    }
});

You can find the working fiddle here

Alternatively you can use the form.submit() method to submit the form.

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.');
      }
  });
}

You can find this example here

Have a look at fileInputEl You could register a change listener on the filefield and get the file from there, e.g.

listeners: {
    change: function(field, fileName) {
        var fileList = field.fileInputEl.dom.files;
        for (var i = 0; i < fileList.length; i++) {
          var file = fileList[i];
          //do what ever you want with file
        }
    }
}