I am implementing a multifile upload component that shows the upload progress percentage of each file using axios in Vue.js.

But the "onUploadProgress" in axios seems to return the overall progress, not the progress of each file. So the progress of the first file is not displayed.

The total value of the ProgressEvent object matches the sum of the sizes of the two files in the image below.

[Code]

let formData = new FormData();
payload.data.files.forEach((data) => {
    formData.append('files[]', data);
});

...

let response = await axios.post(url, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            },  
            onUploadProgress: (progressEvent) => {
                let percentage = parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100));
                let files = store.state.uploadFiles.map((value, index, row) => {
                    if(index === row.length - 1) {
                        value.uploadPercentage = percentage;
                    }   
                    return value;
                }); 
                store.commit(Constant.UPLOAD_FILES, { files: files }); 
            }   
        }); 
        if (response.data.success) {
            let files = store.state.uploadFiles.map((value, index, row) => {
                if(index === row.length - 1) {
                    value.uploadPercentage = 100;
                }   
                return value;
            }); 
            store.commit(Constant.UPLOAD_FILES, { files: files });
        }

Looping through a single file upload request is the solution I've been looking into. I wonder if there is any other way at all.

Please Help. Any ideas would be greatly appreciated.