Getting Download URLs from Firebase Storage on Multiple Image Upload Using Promise.all() in React Native

Question

I am trying to get the download URLs of an array of images that are uploaded to firebase storage. I am having difficulties pushing the download URLs into the downloadURLs array in state.

The values push into state each time a download URL becomes available, however the state's previous values are not available for the .concat() to merge the values with.

I would either like to push the values into state as they come over, or use Promise.all() to get all of the values once the download URLs are available. If I can obtain them all using Promise.all() then I would set state at the end using the promise values as the array.

When all of the uploads compete, I want to use this array in a separate function that creates a firestore document containing an "images" object that is an array of download URLs.

const initialImages = ["file://1", "file://2"];
const [downloadURLs, setDownloadURLs] = useState([]);


//Uploads array of images to firebase cloud storage...
const uploadImages = () => {
   const promises = [];
   initialImages.forEach(async file => {
   const imageFile = await getBlob(file);
   console.log("Uploading Image...");
   const storageRef = firebase.storage().ref("REDATED/" + uuid.v4());
    const uploadTask =
       storageRef.put(imageFile);
       promises.push(uploadTask);
       uploadTask.on(
          firebase.storage.TaskEvent.STATE_CHANGED,
          snapshot => {
           const progress =
             snapshot.bytesTransferred / snapshot.totalBytes * 100;
              if (snapshot.state === firebase.storage.TaskState.RUNNING) {
               console.log(`Progress: ${progress}%`);
               setUploadProgress(progress);
              }
            },
            error => console.log(error.code)
            );
            uploadTask.then(() => {
            storageRef.getDownloadURL().then((url) => {
            console.log("Download URL: ", url);
            setDownloadURLs(downloadURLs.concat([url]));
            }).catch((error) => {
            console.log("Error getting download url: ", error)
            });
           console.log("Image Successfully Uploaded");
           })
          });
        Promise.all(promises)
       .then((result) => {
       console.log("Beginning Upload...", result);
       setLoading(true);
       })
       .catch(err => console.log(err.code))
}

Beginning Upload... Array []
Uploading Image...
Progress: 0%
Uploading Image...
Progress: 0%
Progress: 4.479358170090326%
Progress: 3.6015410524626637%
Progress: 13.438074510270978%
Progress: 7.203082104925327%
Progress: 10.804623157387992%
Progress: 27.436068791803248%
Progress: 31.35550719063228%
Progress: 17.557512630755486%
Progress: 22.50963157789165%
Progress: 25.21078736723865%
Progress: 40.31422353081293%
Progress: 46.47334101468713%
Progress: 27.686846840806727%
Progress: 49.55289975662423%
Progress: 30.16290631437481%
Progress: 52.63245849856133%
Progress: 32.638965787942894%
Progress: 55.69404130057634%
Progress: 35.565217893068805%
Progress: 58.23165621117423%
Progress: 61.31121495311134%
Progress: 38.04127736663689%
Progress: 64.39077369504844%
Progress: 40.50288363438225%
Progress: 67.19037255135488%
Progress: 43.21849262955197%
Progress: 48.17061157668813%
Progress: 53.108277318001576%
Progress: 54.023115786939954%
Progress: 72.22934291958997%
Progress: 78.3887679765807%
Progress: 84.51160892009882%
Progress: 56.52809541094228%
Progress: 87.59116766203593%
Progress: 59.229251200289276%
Progress: 90.67072640397302%
Progress: 93.75028514591013%
Progress: 61.66181366850117%
Progress: 94.06652157189684%
Progress: 66.40316585658188%
Progress: 97.14608031383393%
Progress: 68.87922533014996%
Progress: 100%
Progress: 71.68876642437854%
Progress: 76.71392077280137%
Progress: 81.66603971993753%
Progress: 83.28538954000062%
Progress: 91.38873325894237%
Progress: 93.14595182466228%
Image Successfully Uploaded
Progress: 97.24160841649193%
Progress: 100%
Download URL:  REDACTED
Image Successfully Uploaded
Download URL:  REDACTED
Download Url Array:  Array [
  "REDACTED",
]

Answer 1

Instead of setting state like so

setDownloadURLs(downloadURLs.concat([url]));

use the callback approach

setDownloadURLs((prev) => [...prev, url]);