I am working on an Angular 10 project where users can compress and upload images to Google Cloud Storage. The compression and uploading functionalities are functional, but I'm facing challenges with managing the asynchronous process of handling multiple compressions and uploads at once.
What would be the most effective approach to monitor the progress of each file during compression and upload?
I believe using a class variable like an Array of objects would be ideal for displaying the progress to the user.
One potential solution could be pushing an object to a class Array, but how can we keep track of the specific element to update its status after compression is completed and trigger the percentageChanges() observable when the upload begins?
In my code snippet below, the processFileList() function is called when a user submits selected images through an HTML file input:
async compressAndUpload(file) {
// Compress image - function details not provided, returning a promise
const compressed = await compressImage(file);
// Create upload path
const uploadPath: string = 'file' + (new Date()).getTime()
// Upload the compressed image
const imageUploadTask = this.storage.upload(uploadTask, compressed)
// Obtain current upload percentage as an observable
const percentage = imageUploadTask.percentageChanges()
}
processFileList(fileList: FileList) {
// Convert FileList to array for iteration
const files = Array.from(fileList);
// Iterate through each file and call compressAndUpload function
files.forEach(file => {
compressAndUpload(file);
})
}