Axios onUploadProgress only fires once on my machine

Question

If I use this fiddle https://jsfiddle.net/v70kou59/1/ everything works as expected

(function () {
    var output = document.getElementById(\'output\');
    d         


        

Answer 1

Because the new version changed.

So you have to call progress instead of onUploadProgress

 static uploadImageFile(authId, userinfo, file, callback) {
        let url = AppConfig.domain + '/api/CoreUploads/uploadImg';
        let formData = new FormData();
        formData.append('realm', userinfo.realm);
        formData.append('fileurl', `users/${userinfo.id}/`);
        formData.append('cropData', "");
        formData.append('autoid', true);
        formData.append('image', file);

        return axios.post(url, formData, {
            timeout: 1000000,
            withCredentials: true,
            headers: {
                'Authorization': authId,
                'Content-type': 'multipart/form-data'
            },
            progress: function (progressEvent) {
                let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                callback(percentCompleted);
            }
        }).catch(e => {
            console.log(e);

        });
    }

Answer 2

I've had exact issue. One of the reason(it was the case with me) could be, your network is too fast to trigger the progressEvent multiple times.

To simulate this, slow down your network on Network tab of your Browser.

Slow 3G setting worked for me on Google Chrome/New Edge(dev release) browser.

Refer the image:

PS: I know this is too late to answer this. But others might find it helpful when they land here.