Actualmente estoy tomando un proyecto anterior que usa una versión desactualizada de Firebase y lo estoy migrando a la versión modular más nueva. Después de seguir la documentación en el sitio web de Firebase, pude hacer la mayor parte excepto por la siguiente característica de mi proyecto: Permitir que un usuario registrado cargue una foto.
Todo funciona además de mi función handleUpload que se ve así:
const handleUpload = () => { const uploadTask = storage.ref('images/${image.name}').put(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); }, () => { //complete function storage.ref("images").child(image.name).getDownloadURL() .then(url => { db.collection("posts").add({ timestamp: serverTimestamp, caption: caption, imageUrl: url, username: username }); setProgress(0); setCaption(""); setImage(null); }) } ) } Parece que no puedo hacer que esta parte funcione porque tengo un problema al convertir la antigua sintaxis de Firebase en la versión modular más nueva. He intentado seguir la documentación en línea haciendo algo como const storageRef = ref(storage, 'some-child'); pero el resto todavía no funcionará.
¿Alguna idea sobre cómo solucionar esto o cómo debería verse la función con la sintaxis más nueva?
La versión Modular del mismo debe quedar de la siguiente manera:
ref() para crear una StorageReference.UploadTask usando uploadBytesResumable() . Tenga en cuenta que solo uploadBytes() no se puede usar si desea monitorear el progreso de la carga. Aparte de eso, funciona dentro del oyente .on() igual que V8.
import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage"; const storage = getStorage(app); const handleUpload = () => { const storageRef = ref(storage, `images/${image.name}`); 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); }, async () => { //complete function // const url = await getDownloadURL(storageRef) } ) } Luego, para agregar un documento, debe usar la función addDoc() como se muestra a continuación:
import { getFirestore, collection, addDoc } from "firebase/firestore"; const db = getFirestore(); const docRef = await addDoc(collection(db, "posts"), {...data});Consulte también esta respuesta para obtener más detalles sobre los cambios en la sintaxis de Firestore:
Firestore: ¿Cuál es el patrón para agregar nuevos datos en Web v9?