CODEWITHSUNDEEP
reactjsfirebase
José Carlos
José Carlos

Reputation: 774

Updating profile picture in firebase

i'm not sure what i'm doing wrong here, i upload a new picture to firebase storage, then i retrieve it with getDownloadUrl, and then i update the user profile photoURL, but for some reason it's not working.

const imgPath = ref(storage, "images/");
  const imgUpload = () => {
    if (uImg == null) return;

    const imgRef = ref(storage, `images/${uImg.name + v4()}`);
    uploadBytes(imgRef, uImg).then(() => {
      listAll(imgPath).then((response) => {
        response.items.forEach((item) => {
          getDownloadURL(item).then((url) => {
            setImgUrl([url]);

            updateProfile(auth.currentUser, {
              photoURL: `${imgUrl[0]}`,
            })
              .then(() => {
                setProfileImg(auth.currentUser.photoURL);
                console.log("success");
              })
              .catch((error) => {
                console.log(error);
              });
          });
        });
      });
    });
  };

uImg is the uploaded img

Upvotes: 0

Views: 3807

Answers (2)

Lonare
Lonare

Reputation: 4683

According to firebase moduler v9 you can update user's basic profile information, the user's display name and profile photo URL with the updateProfile method.

For example:

import { getAuth, updateProfile } from "firebase/auth";
const auth = getAuth();
updateProfile(auth.currentUser, {
  displayName: "Jane Q. User", photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(() => {
  // Profile updated!
  // ...
}).catch((error) => {
  // An error occurred
  // ...
});

Upvotes: 0

Geoffrey Bourne
Geoffrey Bourne

Reputation: 620

It is unlikely the current user is updated by the time the updateProfile then statement runs.

Instead update the useState hook as with the imgUrl[0].

updateProfile(auth.currentUser, { photoURL: `${imgUrl[0]}` })
     .then(() => {
        setProfileImg(imgUrl[0]);
        console.log("success");
 }).catch((error) => { console.log(error); });

If you want to verify that the profile image was updated print of the value:

const auth = getAuth();
useEffect(() => {
  console.log("Profile:", auth.currentUser?.photoURL);
}, []);

Upvotes: 2

Related Questions