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

talha06 picture talha06 · Feb 1, 2017 · Viewed 11k times · Source

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

khmurach picture khmurach · Jun 30, 2017

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