Uploading multiple photos at once in firebase storage and storing their URLs in a firestore document (firebase version 9)

Question

I am building a form where the user needs to input information to create a city document. The user also needs to upload multiple photos of the city. When submitting the form, a new city document is created in firestore, then each photo is uploaded to the associated firebase storage, and finally a new field called photosURLs with all the photos URLs is added to the city document.

Here is my code:

async function addDocument() {
    const docRef = await addDoc(collection(db, "cities"), {
        name: "Tokyo",
        country: "Japan"
      });
    return docRef
}

async function UploadMultiplePhotos(docRef) {
    var photos = []
    for (var i = 0; i < files.value.length; i++) { // files.values contains all the files objects
        const file = files.value[i];
        refStorageFunction(
            storage,
            "cities/" +
            docRef.id +
            "/" +
            file.name
          );
        uploadBytes(storageRef, file).then((snapshot) => {
            getDownloadURL(snapshot.ref).then((downloadURL) => {
                photos.push(downloadURL)
            });
        });
    }
    return Promise.resolve(photos)
}

async function updateDocument(docRef, photos) {
    await updateDoc(docRef, { photosURLs: photos });
}

function createCity() {
    addDocument().then((docRef) => {
        UploadMultiplePhotos(docRef).then((photos) => {
            updateDocument(docRef, photos).then(() => {
                router.push($CITY_PATH)
            })
        })
    })
}

My issue is that the resulting photosURLs field in the city document is empty. It seems my function UploadMultiplePhotos does not wait for the photos array to be completely populated.

Answer 1

If you set breakpoints and run the code in a debugger, or add some well-placed log statements, you'll see that your return Promise.resolve(photos) runs before the photos.push(downloadURL) is ever called: so you're always resolving with an empty array.

A simple solution is to use await instead of then() :

async function UploadMultiplePhotos(docRef) {
    var photos = []
    for (var i = 0; i < files.value.length; i++) { // files.values contains all the files objects
        const file = files.value[i];
        refStorageFunction(
            storage,
            "cities/" +
            docRef.id +
            "/" +
            file.name
          );
        const snapshot = await uploadBytes(storageRef, file)
        const downloadURL = await getDownloadURL(snapshot.ref)
        photos.push(downloadURL)
    }
    return photos
}

Answer 2

Hey I'm stuck with the same problem could you please help me out. here is my problem I copied and tried from you that didnt work for me please visit this. Firebase Update a Document

Answer 3

This works for firebase v9:

        const promises = [];
        const storage = getStorage();

        for (var i = 0; i < files.length; i++) {
            const file = files[i];
            if (file !== null) {
                const storageRef = ref(storage, `path-to-your-storage-location`);

                promises.push(uploadBytesResumable(storageRef, file).then(uploadResult => {
                    return getDownloadURL(uploadResult.ref)
                }))
            }

        }
        // Get all the downloadURLs
        const photos = await Promise.all(promises);
        
        // Update Firestore with the URLs array
        try {
            await setDoc(answerRef, {
                supportImages: photos
            }, {merge: true}).then(r => {
                console.log('done')
            });
        } catch (err) {
            alert(err)
        }