Extjs file upload progress

Question

I have seen form file upload example in ExtJS4 and i need customize progress of the file upload.

I see waitMsg config property, but i don't want use that and i don't want use extjs 3rd party plugins.

So, how i can get simply current upload progress from upload form in extjs?

A1rPun · Accepted Answer · 2013-01-21T14:45:07.560

3

The waitMsg uses a message box with an infinitely auto-updating progress bar. So you can't just create a progressbar that displays the current upload.

You could create your own Ext.ProgressBar and estimate the upload time and when its done you set it to the max value. But I guess you don't want that.

To answer your question: You cannot simply track the current upload progress.

If you really need this user experience you can try a 3rd party component.

To quote the docs:

File uploads are not performed using normal "Ajax" techniques, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM element temporarily modified to have its target set to refer to a dynamically generated, hidden which is inserted into the document but removed after the return data has been gathered.

edited Jan 21 '13 at 14:45

answered Jan 21 '13 at 14:22

A1rPun

16,287
7
57
90

i thinking extjs handles file PUT request and xhr must return bytes to sent... No? – xercool Jan 21 '13 at 14:33
http://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest this question about XHR discussed here. How i can get request xhr object from extjs? – xercool Jan 21 '13 at 14:37
I'm sorry. I wish we could do it easily ;) – A1rPun Jan 21 '13 at 14:51
1

We can send a request to Sencha :-) – xercool Jan 22 '13 at 07:25
Check 3rd party File upload widget for Ext JS v4.x by Ivan Novakov (https://github.com/ivan-novakov/extjs-upload-widget); and the same forked widget for Ext JS v5.x edited by Bugs Bunny (https://github.com/BugsBunny338/extjs-upload-widget). – Bugs Bunny Apr 15 '15 at 14:32

score 1 · Answer 2 · answered Jun 28 '17 at 19:38

To show real progress you can use onprogress callback of XMLHttpRequest:

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 online demo here.

score 0 · Answer 3 · answered Feb 20 '14 at 12:10

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 is here

Extjs file upload progress

3 Answers3