Soy nuevo en aprender a reaccionar js con el almacenamiento de base de fuego. Estoy tratando de cargar varias imágenes en firebase v9. He subido con éxito una sola imagen, pero no puedo hacer varias imágenes. He visto tutoriales pero esos no están actualizados.

Además, después de cargar todas las imágenes, quiero todas las URL en una matriz porque necesito enviarlas también en el backend.

 const [progress, setProgress] = useState(0); const [selectedImages, setSelectedImages] = useState([]); const onSelectFileUpload = (e) => { e.preventDefault(); const file = e.target[0].files[0]; uploadFiles(file); }; const uploadFiles = (file) => { // if (!file) return; const sotrageRef = ref(storage, `files/${file.name}`); const uploadTask = uploadBytesResumable(sotrageRef, file); uploadTask.on( "state_changed", (snapshot) => { const prog = Math.round( (snapshot.bytesTransferred / snapshot.totalBytes) * 100 ); setProgress(prog); }, (error) => console.log(error), () => { getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => { console.log("File available at", downloadURL); }); } ); };

Código HTML:

 <form onSubmit={onSelectFileUpload}> <div className="shadow sm:rounded-md sm:overflow-hidden bg-white px-4 py-5 bg-white space-y-6 sm:p-6"> <input type="file" name="images" multiple accept="image/png , image/jpeg, image/webp" /> <div className=" py-3 text-right "> <button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button> </div> </div> </form>

Alguien me puede orientar de como puedo solucionarlo?