Adding new user information from Firebase v8 to v9-CodePudding

I have a code to create user with image and username to Firebase v8 and I can't replace it to Firebase v9.

Can someone help me? Thank you!

    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 })

CodePudding user response：

The documentation has examples of both V8 (namespaced) and V9 (Modular) syntax. You can just switch to modular tab for reference. For this case, try refactoring the code as shown below:

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")
});

Also do ensure that you've initialized auth and storage using getAuth() and getStorage() respectively.

Checkout:

CodePudding user response：

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))
})