Extjs file upload progress
I saw an example of loading a form file in ExtJS4 and I need to customize the progress of the file loading.
I see the waitMsg config property, but I don't want to use it, and I don't want to use third party extjs plugins.
So how can I get the current current upload from the upload form in extjs?
source to share
waitMsg uses a message box with an infinitely automatic update of the progress bar. Thus, you cannot simply create a progress bar displaying the current download.
You can create your own Ext.ProgressBar
and estimate the load time, and when it is done, you set the maximum value. But I think you don't want that.
To answer your question: you can't just track your current download.
If you really want this UI, you can try a third party component .
To quote the docs:
File uploads are not done using normal "Ajax" methods, that is, they are not done using XMLHttpRequests. Instead, a form rendered in a standard way using a DOM element is temporarily modified so that its target set refers to a dynamically generated, hidden one that is inserted into the document but removed after the checkout data is collected.
source to share
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/upload/file',
waitMsg: 'Uploading your file...',
success: function (f, a) {
var result = a.result,
data = result.data,
name = data.name,
size = data.size,
message = Ext.String.format('<b>Message:</b> {0}<br>' +
'<b>FileName:</b> {1}<br>' +
'<b>FileSize:</b> {2} bytes',
result.msg, name, size);
Ext.Msg.alert('Success', message);
},
failure: function (f, a) {
Ext.Msg.alert('Failure', a.result.msg);
}
});
}
}
}]
Live demo with progress window here
source to share
To show real progress, you can use the onprogress XMLHttpRequest callback:
Ext.override(Ext.data.request.Ajax, {
openRequest: function (options) {
var xhr = this.callParent(arguments);
if (options.progress) {
xhr.upload.onprogress = options.progress;
}
return xhr;
}
});
Then use like here:
Ext.Ajax.request({
url: '/upload/files',
rawData: data,
headers: { 'Content-Type': null }, //to use content type of FormData
progress: function (e) {
console.log('progress', e.loaded / e.total);
}
});
See an online demo here .
source to share