Progress bar for multiple file uploads

Describe the issue

Basically, I want to upload multiple files at the same time, but, with a progress bar. With the current code I have (using onUploadProgress) it only works for the first file instead of with each file. Is there a good way to trigger onUploadProgress for each file instead of the first one?

I have been trying for hours and can’t seem to find a good solution.

Example Code

This is a snippet of the code I currently have.

let form_data = new FormData();

//Append image to the form data
form_data.append(
	"thumbnail",
	formState.thumbnail[0],
	formState.thumbnail[0].name
);

//Append all other files to the form data
for (let x = 0; x < formState.projectFiles.length; x++) {
	form_data.append(
		`projectFile${x}`,
		formState.projectFiles[x],
		formState.projectFiles[x].name
	);
}

//Set up the config
const config = {
	//Here is where I have the problem. This only works for the first file.
	onUploadProgress: function (progressEvent) {
		let percentCompleted = Math.round(
			(progressEvent.loaded * 100) / progressEvent.total
		);
		console.log(percentCompleted);
	},
	headers: {
		"Content-Type": "multipart/form-data"
	}
};

//Post the form data
axios
	.post("/api/catalog/submit/", form_data, config)
	.catch((err) => console.log(err));

Expected behavior, if applicable

I would like it to show upload progress (basically to trigger onUploadProgress) for every file that is being uploaded, not just the first one.

Environment

• Axios Version 0.20.0
• Adapter HTTP
• Browser Firefox
• Browser Version 80.0.1
• Node.js Version 12.18.3
• OS: Windows 10
• Additional Library Versions React 16.13.1

Additional context/Screenshots

[siesta51]

I had the same phenomenon. The progress bar will increase or decrease from the second upload. If you check progressEvent.loaded in console.log, it will increase or decrease. From here, it is a hypothesis, but when I checked the network of devtool of chrome, the first file upload had only one request, but the second file upload was divided into multiple requests. Since each of these divided requests is uploaded, I think that each progressEvent.loaded is being loaded. I wish I could converge the requests into one, but I don’t know how.

[Ibtesam-haider96]

Any update on this issue? I am facing the same issue.