Tengo un código para crear un usuario con imagen y nombre de usuario para Firebase v8 y no puedo reemplazarlo por Firebase v9.
¿Alguien me puede ayudar? ¡Gracias!
import { useState, useEffect } from 'react' import { projectAuth, projectStorage, projectFirestore } from '../firebase/config' import { useAuthContext } from './useAuthContext' export const useSignup = () => { const [isCancelled, setIsCancelled] = useState(false) const [error, setError] = useState(null) const [isPending, setIsPending] = useState(f`enter code here`alse) const { dispatch } = useAuthContext() // upload user thumbnail const uploadPath = `thumbnails/${res.user.uid}/${thumbnail.name}` const img = await projectStorage.ref(uploadPath).put(thumbnail) const imgUrl = await img.ref.getDownloadURL() // add display AND PHOTO_URL name to user await res.user.updateProfile({ displayName, photoURL: imgUrl })import {st, db} from '../firebase/config' import { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage'; import { doc, setDoc } from 'firebase/firestore'; const _storageRef = ref(st, "thumbnails/" + res.user.uid + "/" + thumbnail.name) const _uploadTask = uploadBytesResumable(_storageRef, file); _uploadTask.on("state_changed", (snapshot) => { console.log((snapshot.bytesTransferred/snapshot.totalBytes) * 100) },(error) => { console.error(error) }, async () => { await getDownloadURL(_storageRef) .then((url) => { //update database with the new image url console.log(url) //setDoc(doc(db, "users", uid), { // photoURL: url // }, {merge: true}) <- to not erase the rest of the values like displayName }) .catch(error => console.error(error)) })La documentación tiene ejemplos de sintaxis V8 (espacio de nombres) y V9 (Modular) . Simplemente puede cambiar a la pestaña modular como referencia. Para este caso, intente refactorizar el código como se muestra a continuación:
import { ref, uploadBytes } from "firebase/storage" import { updateProfile } from "firebase/auth" const storageRef = ref(projectStorage, `thumbnails/${res.user.uid}/${thumbnail.name}`); // 'file' comes from the Blob or File API // uploadBytes() instead of .put() uploadBytes(storageRef, file).then(async (snapshot) => { console.log('Uploaded a blob or file!'); // updateProfile() is now a top-level function // and not a method on User object await updateProfile(res.user, { displayName: name }); console.log("User profile updated") }); También asegúrese de haber inicializado la autenticación y el almacenamiento usando getAuth() y getStorage() respectivamente.
Verificar: