Hay preguntas similares en stackoverflow, pero nada de eso solucionó mis problemas... Tal vez porque esas preguntas son antiguas y las soluciones para versiones anteriores... Así que probé diferentes métodos que vi, pero ninguno ayudó a mostrar el mismo error. por favor ayúdenme a solucionarlo amigos...
Crear archivo.js:
import { FirebaseContext, AuthContext } from '../../store/Context'; const { firebase } = useContext(FirebaseContext); const handleSubmit = () => { firebase.storage().ref(`/image/${image.name}`).put(image).on('state_changed').then(({ ref }) => { ref.getDownloadURL().then((url) => { console.log(url); }) }) } return ( <Fragment> <button className="uploadBtn" onClick={handleSubmit}>Upload and Submit</button> <Fragment/> )He agregado solo las partes necesarias aquí. El archivo de configuración de firebase tiene las siguientes importaciones:
import 'firebase/compat/auth'; import 'firebase/compat/firestore'; import 'firebase/storage'Estoy haciendo mi proyecto en React.
Estás importando las rutas de compat de auth y firestore , lo que significa que puedes usar la sintaxis de espacio de nombres al usar esos productos. Pero para storage , está importando la ruta predeterminada, lo que significa que debe usar la nueva sintaxis modular de la versión SDK que usa.
Para poder usar la sintaxis de espacio de nombres para el almacenamiento también:
import 'firebase/compat/storage'Para cargar una imagen en el almacenamiento de Firebase y obtener la URL de la imagen cargada, puede usar esto:
import { getStorage, ref, uploadBytes,getDownloadURL } from "firebase/storage"; const Create = () => { const handleSubmit = () => { const storage = getStorage(); const storageRef = ref(storage, `/image/${image.name}`); //uploads the file to firebase storage uploadBytes(storageRef, image).then((snapshot) => { console.log('Uploaded a blob or file!'); } ).then(() => { //gets the url for the uploaded image getDownloadURL(ref(storage, `/image/${image.name}`)).then((url) => { console.log('url is: ' + url); }) }) } return ( <Fragment> <div> <button className="uploadBtn" onClick={handleSubmit}>Upload</button> </div> </Fragment> ) }