ExtJS 6 Ajax Multi File Upload With Progress Bar

Posted By Vitaliy | June 28, 2017 | ExtJS 6.0.0
0 971
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 495
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

Posted By Vitaliy | June 23, 2017 | ExtJS 6.0.0
0 699
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 560
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
    }
}
            

ExtJS 6 "Hello World" Application - Modern Toolkit

Posted By Vitaliy | May 05, 2017 | ExtJS 6.0.0
0 641
This is minimal html page code to run ExtJS version 6 in Modern Toolkit.
Note: that it's recommended to add html DOCTYPE for this version of library.
Also there is a way to avoid including of whole ExtJS library (ext-modern-all.js, 1053Kb). You can find demo in my another post and more details here.
Also be aware that in 6.0.0 there is no triton theme in modern toolkit.

<!DOCTYPE html>
<html>
    <head>
        <link  href="/ext/6.0.0/build/modern/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
        <script src="/ext/6.0.0/build/ext-modern-all.js"></script>
        <script src="/ext/6.0.0/build/modern/theme-neptune/theme-neptune.js"></script>
    </head>
    <body>
        <script>
			Ext.application({
				launch : function() {
					Ext.Msg.alert('Welcome', 'Hello, World!');
				}
			});
        </script>
    </body>
</html>

Js Code

Ext.application({
    launch : function() {
        Ext.Msg.alert('Welcome', 'Hello, World!');
    }
});