Tengo en mi sitio una página donde manejé la carga de archivos, pero desde que actualicé Firebase (supongo que fue Firebase v7/8 ), esta función en particular ya no funciona.
Para manejar la carga de archivos en el almacenamiento de Firebase, creé un enlace personalizado, donde uso useEffect porque necesito que se ejecute cada vez que hay un nuevo valor de archivo. Pasé un parámetro ( file ) para el archivo que estoy tratando de cargar y almacenar en la base de datos, y de esa manera la base de datos contiene la URL de todas las imágenes. Luego usé los datos para cargar imágenes en componentes de reacción.
El error que tengo:
TypeError no detectado: projectStorage.ref no es una función
Como estoy en Firebase v9 , estoy un poco confundido al respecto y no sé qué cambiar. Gracias por su ayuda, realmente lo aprecio =).
useStorage.jsx (gancho personalizado)
import {projectStorage, projectFirestore, timestamp} from '../Firebase' import { useEffect, useState } from 'react' function useStorage(file) { const [progress, setProgress] = useState(0); const [error, setError] = useState(null); const [url, setUrl] = useState(null); useEffect(() => { const storageRef = projectStorage.ref(file.name) const collectionRef = projectFirestore.collection('images'); storageRef.put(file).on('state_changed', (snap) => { let percent = (snap.bytesTransferred / snap.totalBytes) * 100; setProgress(percent >> 0); // or Math.trunc() }, (err) => { setError(err); }, async () =>{ const url = await storageRef.getDownloadURL(); const createdAt = timestamp(); collectionRef.add({ url, createdAt}); setUrl(url); }); }, [file]); return {progress, url, error}; } export default useStorage;Hay una función de nivel superior uploadBytesResumable() para cargar archivos mientras se supervisa el progreso. Intente refactorizar el código como se muestra a continuación:
import {projectStorage, projectFirestore, timestamp} from '../Firebase' import { ref as storageRef, uploadBytesResumable } from "firebase/storage"; useEffect(() => { // Creating a storage reference const storageReference = storageRef(projectStorage, file.name); // Creating an upload task const uploadTask = uploadBytesResumable(storageReference, file); // Monitoring upload progress uploadTask.on("state_changed", (snapshot: any) => { console.log(snapshot); // render progress }); }, [file])Consulte la documentación sobre Subir archivos con Cloud Storage en la Web .