React - Upload avatar to firebase-CodePudding

Good afternoon, I can’t figure out how to upload a photo (avatar) to firebase, but so that the avatar for each user is different and saved at each user login. User registration via firebase Authentication

const [user, loading] = useAuthState(auth);
  const [image , setImage] = useState("");
  const storage = getStorage();

//upload function
  const upload = ()=>{
    const storageRef = ref(storage, `usersAvatar/${image.name}`);

    if(image == null) return;
    uploadBytes(storageRef, image).then(() =>{
      getDownloadURL(storageRef).then((url) => {
        setUrl(url);
      })
    })
  }


// return
<input type="file" onChange={(e)=>{setImage(e.target.files[0])}}/>
<button onClick={upload}>Upload</button>

CodePudding user response：

Since you use this location in Cloud Storage to store the user's image:

const storageRef = ref(storage, `usersAvatar/${image.name}`);

Any user who uploads the same image.name will end up overwriting anyone else's image.

What you'll want to do instead is based the upload location on the UID of the user. So for example:

const storageRef = ref(storage, `usersAvatar/${user.uid}/${image.name}`);