I use Firebase Storage with React. I have an array with multiple images. For every single image in it I do an upload to Firebase. Once I get the downloadUrl back, I want to store it in a hook array for further use. However, my array is always empty. Why ?
If I use the useEffect hook as soon as the array changes, I get an output every time the downloadUrl is inserted into the array. However: One line per URL and not an array with the URLs
const [uploadBilder, setUploadBilder] = useState([]);
await Promise.all(
mehrBilder?.map((bild) => {
const storageRef = ref(
storage,
`${aktuellerUser._id}/artikelBilder/` + bild.name
);
const uploadTask = uploadBytesResumable(storageRef, bild);
uploadTask.on(
"state_changed",
(snapshot) => {
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log("Upload is " + progress + "% done");
switch (snapshot.state) {
case "paused":
console.log("Upload is paused");
break;
case "running":
console.log("Upload is running");
break;
}
},
(error) => {
console.log(error);
},
() => {
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
setUploadBilder((prev) => [...prev, downloadURL]);
console.log(uploadBilder); //EMPTY
});
}
);
})
);
useEffect(() => {
console.log(uploadBilder) //count 3 = right!
},[uploadBilder]}