Update photoURL Firebase v9 web, react Javascript-CodePudding

I'm following a Udemy firebase Udemy tutorial for creating a firebase web application using javascript and react. The course material is a bit our of date. I want to know how to change a user's photoURL - they log up with email and password, and I have a seperate hook to handle the sign up information.

Below is the code the Udemy course gives to update a user's photoURL - does anyone know how I would write this in Firebase v9? Thank you!

// 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：

Rewriting from pre-v9 to v9 is usually quite simple, especially if you follow the upgrade guide or compare the v8 and v9 samples in the documentation on uploading files.

In your code, this v8 code:

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

Becomes this in v9 and above:

const uploadPath = `thumbnails/${res.user.uid}/${thumbnail.name}`
const img = await uploadBytes(ref(projectStorage, uploadPath, thumbnail))
const imgUrl = await getDownloadUrl(img.ref)

// add display AND PHOTO_URL name to user
await res.user.updateProfile({ displayName, photoURL: imgUrl })

If you watch carefully, you'll see that most of the change is just in moving the namespaced object.operation() method calls into a modular/functional opertion(object) form. Aside from that, the biggest difference here is that put is now called uploadBytes.