I am currently working on a loop for uploading files.
this.fileUpload.filter((file) => !file.error)
.map((file, index_file) => {
var formData = new FormData();
formData.append("folderID", id);
formData.append("folderName", name);
formData.append("type", type);
formData.append(`content`, file);
fileService
.uploadfiles(
formData,
(event) => {
file.status = "uploading";
file.uploadPercentage =
Math.round((event.loaded * 100) / event.total) * 0.9;
if (file.uploadPercentage == 90) {
file.status = "uploaded";
}
console.log( file.uploadPercentage);
}
)
.then((result) => {
file.uploadPercentage = 100;
file.status = "done";
})
.catch(() => {
file.status = "uploaded";
});
});
Just a little reminder: fileService.uploadfiles function is used to create a function that calls axios.post method.
Also, remember to include a div element to display the uploading progress:
<div v-for="(file, file_index) in fileUpload" :key="`file_preview_${file_index}_${file.name}_${file.status}`">
{{ file.uploadPercentage }}
</div>
If you encounter an issue where the percentage on the div element does not update while the console logs correctly, make sure to troubleshoot and identify the root cause.