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?

+3


source to share


3 answers


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.

+3


source


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

0


source


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 .

0


source







All Articles