ExtJS 6 Ajax Multi File Upload With Progress Bar

Posted By Vitaliy | June 28, 2017 | ExtJS 6.0.0
0 967
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 492
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 550
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 694
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){
   }
});