Estoy tratando de cargar imágenes en firebase y obtener la URL de descarga y guardar la url en firestore en la base de datos. El código funcionaba hasta que lo modifiqué para manejar múltiples imágenes. Para manejar múltiples imágenes he implementado promesas.

Las funciones uploadFiles() y addRecord() funcionan completamente bien por separado. Pero quiero ejecutar las funciones juntas en la función onSubmit(). El problema al que me enfrento es que addRecord() se ejecuta antes de que uploadFiles() complete su ejecución.

Probé las promesas y async await para controlar el flujo, pero no tuve éxito. Soy nuevo en el manejo de promesas y me he quedado atascado.

aquí está el código uploadFiles

 const uploadFiles = (data) => { const promises = []; data.images.map((file) => { console.log("loop"); const sotrageRef = ref(storage, `files/${file.name}`); const uploadTask = uploadBytesResumable(sotrageRef, file); promises.push(uploadTask); uploadTask.on( "state_changed", (snapshot) => { const prog = Math.round( (snapshot.bytesTransferred / snapshot.totalBytes) * 100 ); setProgress(prog); }, (error) => console.log(error), async () => { await getDownloadURL(uploadTask.snapshot.ref).then((downloadURLs) => { setUrls((prevState) => [...prevState, downloadURLs]); console.log("File available at", downloadURLs); }); } ); }); Promise.all(promises) .then(() => alert("All images uploaded")) .catch((err) => console.log(err)); };

aquí está la función onSubmit

 const onSubmit = async (data) => { console.log("before upload"); await uploadFiles(data); console.log("after upload"); console.log(urls); await addRecord({ title: data.title, eventType: data.eventType, date: data.date, venue: data.venue, description: data.description, details: data.details, images: urls, link: data.link, scheduleType: data.scheduleType, }); };

Los archivos de carga establecen el estado de las direcciones URL en las direcciones URL de las imágenes del almacenamiento de Firebase. Tengo mensajes registrados en la consola antes y después de uploadFiles. console.log(urls) devuelve una matriz vacía después de que se completa uploadFiles, pero los valores se completan con URL después de que se ejecuta addRecord . Esto da como resultado que el registro de firestore sea una matriz vacía para imágenes.

Aquí hay una captura de pantalla de la consola.

¿Hay algún problema con la forma en que manejo las promesas y la espera asincrónica?