ExtJS 6 Ajax Multi File Upload With Progress Bar

Posted By Vitaliy | June 28, 2017 | ExtJS 6.0.0
0 13
There is a callback onprogress of XMLHttpRequest which is called periodically with information about progress.
Note: Uploading file with AJAX is possible since XMLHttpRequest Level 2 and FormData API.

Js Code

Ext.override(Ext.data.request.Ajax, {
    openRequest: function (options) {
        var xhr = this.callParent(arguments);
        if (options.progress) {
            xhr.upload.onprogress = options.progress;
        }
        return xhr;
    }
});

Ext.Ajax.request({
    url: '/upload/files',
    rawData: data,
    headers: { 'Content-Type': null }, //to use content type of FormData
    progress: function (e) {
        rec.set('progress', e.loaded / e.total);
        rec.set('status', 'uploading...');
        rec.commit();
    }
});
            

ExtJS 6 Ajax Multi File Upload

Posted By Vitaliy | June 28, 2017 | ExtJS 6.0.0
0 7
There are three simple steps to implement this feature:
  1. Set multiple attribute on your filefield
  2. Append all files to single FormData
  3. Send FormData via Ajax request
Note: Uploading file with AJAX is possible since XMLHttpRequest Level 2 and FormData API.

Js Code

var files = s.fileInputEl.dom.files,
     data = new FormData();

Ext.each(files, function(f){
    //use 'files[]' for PHP
    data.append('files', f);
});

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

            

ExtJS 6 Ajax File Upload Modern Toolkit

Posted By Vitaliy | June 24, 2017 | ExtJS 6.2.0
0 55
Uploading file with AJAX is possible since XMLHttpRequest Level 2 and FormData API.

Js Code

var file = s.getComponent().getFiles()[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){
   }
});

            

ExtJS 6 Ajax File Upload

Posted By Vitaliy | June 23, 2017 | ExtJS 6.0.0
0 48
Uploading file with AJAX is possible since XMLHttpRequest Level 2 and FormData API.

Js Code

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){
   }
});

            

ExtJS 6 HTML 5 Multi File Upload

Posted By Vitaliy | June 20, 2017 | ExtJS 6.0.0
0 90
The multiple attribute is new in HTML5.
Note: the multiple attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari.

Js Code

items: {
    xtype: 'form',
    border: false,
    bodyStyle: {
        padding: '10px'
    },
    items: {
        xtype: 'multifilefield',
        labelWidth:100,
        fieldLabel: 'Choose file(s)',
        anchor: '100%',
        allowBlank: false
    }
}