Save Firebase download URL in hook array

Viewed 31

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]}
0 Answers
Related