Estoy creando una aplicación usando firebase y react.js. Cuando vuelvo a cargar la aplicación, solo aparece la última imagen, cuando en cambio todas deberían cargarse en la primera página. Aquí está mi función handleUpload donde radica el problema (actualizado):

 const handleUpload = () => { //const storageRef = ref(storage, `images/${image.name}`); const randomId = doc(collection(db, "temp")).id; const storageRef = ref(storage, `images/${randomId}`); const uploadTask = uploadBytesResumable(storageRef, image); uploadTask.on( "state_changed", (snapshot) => { //Progress function ... (shows the load bar) const progress = Math.round( (snapshot.bytesTransferred / snapshot.totalBytes) * 100 ); setProgress(progress); }, (error) => { //Error Function... console.log(error); alert(error.message); }, async () => { //complete function const url = await getDownloadURL(storageRef); const docRef = await addDoc(collection(db, "posts"), { imageURL: url, caption: caption, username: username, timestamp: serverTimestamp() }); console.log("THE APP HAS POSTED"); setProgress(0); setCaption(''); setImage(null); setUrl(''); } ) }

Aquí está mi consola de almacenamiento después de reiniciar y publicar 2 fotos desde un iPhone:

Debería haber 2 fotos allí, pero solo aparece la última, con el nombre ${image.name} , que no entiendo porque tengo esa línea comentada.

Nota: este problema solo ocurre cuando alguien carga en un teléfono, ya que no hay nombres de archivo en un teléfono, solo una imagen de un rollo de cámara. ¿Hay alguna manera de arreglar esto que alguien pueda pensar?