ExtJS 6 - How to upload a file without using form?

Question

Ext JS provides fileuploadfield which is bundled with a button to browse local files. I just need to upload a file using as soon as it is selected from local instead of using a submit button in order to trigger the post process. Could not find an event which is fired after the file is selected.

p.s. Actually, the version I use is Ext JS 6 but I think the solutions based on previous versions do the work as well.

Answer 1

Form is not required. You can use AJAX and FormData.

var file = s.fileInputEl.dom.files[0],
    data = new FormData();

data.append('file', file);

Ext.Ajax.request({
   url: '/upload/files',
   rawData: data,
   headers: {'Content-Type':null}, //to use content type of FormData
   success: function(response){ }
});

Online demo here

Answer 2

You will need to use a form if you want to submit the file. Even if you want the button to be in a toolbar, you can enclose it in a form and it will still look like a normal toolbar button (you will need to specify the proper ui config for this).

Example:

dockedItems: [{
    dock: 'top',
    xtype: 'toolbar',
    items: [{
        xtype: 'form',
        padding: '10 0 0',
        url: 'submit/image',
        items: {
            xtype: 'filefield',
            buttonOnly: true,
            width: 100,
            buttonConfig: {
                text: 'Add logo',
                width: '100%',
                ui: 'default-toolbar-small'
            },
            listeners: {
                change: function (filefield) {
                    filefield.up('form').submit();
                }
            }
        }
    }, {
        text: 'Remove logo'
    }, '-', {
        text: 'Discard changes'
    }]
}]

Working fiddle example: https://fiddle.sencha.com/#view/editor&fiddle/1pdk