This is the code snippet where I want to get the URL of all uploaded images in promise.all
but when I am invoking the uploadFile
function, it returns an empty array. Can anyone please help me on this issue.
export default function uploadFile(fileInfo) {
const promises = [];
fileInfo.forEach((item) => {
const uploadTask = projectStorage
.ref()
.child(`${item.path}/${item.imageName}`)
.put(item.file);
// promises.push({ task: uploadTask });
uploadTask.on(
"state_changed",
(snapshot) => {
promises.push(snapshot);
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(`Progress: ${progress}%`);
},
(error) => console.log(error.code),
async() => {
promises.push(await uploadTask.snapshot.ref.getDownloadURL());
}
);
});
return Promise.all(promises);
}
CodePudding user response:
Each time you go around the forEach
loop you need to:
- Create a promise
- Add it to the
promises
array
You aren't creating any promises. You're using a regular callback API and are trying to put the final result from the callback into the array (but that happens in the future, which is after you have passed the empty array to Promise.all
.
See How do I convert an existing callback API to promises? for how to wrap uploadTask.on
in a promise.
Also see this similar question about converting calling a callback API multiple times and gathering all the results together using Promise.all
.
CodePudding user response:
The problem is that you're populating the promises
inside the on
listener, and there is nothing that makes the return Promise.all(promises)
wait until the on
calls have completed.
Luckily, calling put
returns a promise already, which resolves once the upload has completed. So instead of using the on
callback to signal completion, you can wait for the put
to resolve:
export default function uploadFile(fileInfo) {
const promises = fileInfo.map((item) => {
const uploadRef = projectStorage
.ref()
.child(`${item.path}/${item.imageName}`)l
const uploadTask = uploadRef.put(item.file);
/*
uploadTask.on(
"state_changed",
(snapshot) => {
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(`Progress: ${progress}%`);
},
(error) => console.log(error.code),
async() => { }
);
*/
return uploadTask.then(() => return uploadRef.getDownloadURL());
});
return Promise.all(promises);
}