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]);