Material UI Avatar Image Upload

Question

I managed it to make an Avatar chooser, but I don't know how to save the picture in Firebase or how to even save it as a Profile picture.

This is how it looks like:

This comes out if I click on the button:

I can choose a pic, but it just not saving it anywhere and also not displaying the picture in the avatar. My code:

function Profile(props, navigation) {
  const classes = useStyles();
  const user = useUser(props.route.params.uid);
  const [time, setTime] = useState("7:30");
  const [timing, setTiming] = useState([]);
  const [timeAfternoon, setTimeAfternoon] = useState("7:30");
  const [timingAfternoon, setTimingAfternoon] = useState([]);
  const [sickDaysStart, setSickDaysStart] = useState(Date.now());
  const [sickDaysEnd, setSickDaysEnd] = useState(Date.now());
  const [sickDaysConfirm, setSickDaysConfirm] = useState([]);
  const [donwloadURL, setDownloadURL] = useState([]);

  const onLogout = () => {
    firebase.auth().signOut();
  };

  function handelSickDaysStart(e) {
    setSickDaysStart(e.target.value);
  }
  function handelSickDaysEnd(e) {
    setSickDaysEnd(e.target.value);
  }
  function handleTime(e) {
    setTime(e.target.value);
  }
  function handleTimeAfternoon(e) {
    setTimeAfternoon(e.target.value);
  }
  function delayMorning() {
    db.collection("delayInTheMorning")
      .doc()
      .set({
        time,
        user,
      })
      .then(() => {
        //If you wish to push the written data to your local state, you can do it here
        setTiming([...timing, { time }]);
        console.log("Documents saved succesfully");
      })
      .catch((err) => {
        console.log(err);
      });
  }
  function delayAfternoon() {
    db.collection("delayInTheAfternoon")
      .doc()
      .set({
        timeAfternoon,
      })
      .then(() => {
        //If you wish to push the written data to your local state, you can do it here
        setTimingAfternoon([...timingAfternoon, { timeAfternoon }]);
        console.log("Documents saved succesfully");
      })
      .catch((err) => {
        console.log(err);
      });
  }

  function sickDaysStartEnd() {
    db.collection("DaysofSickness")
      .doc()
      .set({
        sickDaysStart,
        sickDaysEnd,
        user,
      })
      .then(() => {
        //If you wish to push the written data to your local state, you can do it here
        setSickDaysConfirm([
          ...sickDaysConfirm,
          { sickDaysStart, sickDaysEnd },
        ]);
        console.log("Documents saved succesfully");
      })
      .catch((err) => {
        console.log(err);
      });
  }

  function isCurrentUserProfile() {
    if (props.route.params.uid === firebase.auth().currentUser.uid) {
      return true;
    } else {
      return false;
    }
  }
  async function handleFileInputChange(e) {
    const files = e.target.files;
    const file = files[0];

    const storage = firebase.storage();
    const usersImageRef = storage
      .ref()
      .child(`users/${user.uid}/profilepicture.jpg`);

    const snap = await usersImageRef.put(file);

    const donwloadURL = await snap.ref.getDownloadURL();
    setDownloadURL(donwloadURL);

    await firebase.auth().currentUser.updateProfile({ photoURL: donwloadURL });
  }

  if (user === null) {
    return ;
  }
  return (
    
      
        
        
          
            
          
        
         {user.name} 
         {user.email} 

        {isCurrentUserProfile() ? (
          
        ) : null}
      
      
        {/* //Verspätung */}
        
          
            {" "}
            Verspätung{" "}
          
          
             {
                handleTime(value);
              }}
            />
            
          
        

        {/* //Krankenmledungen */}
        
          
            Krankenmledungen
          
          
             {
                handelSickDaysStart(value);
              }}
            />

             {
                handelSickDaysEnd(value);
              }}
            />
          
          
        

        {/* //Verspätung Abolung*/}
        
          
            {" "}
            Verspätung Abholung
          
          
             {
                handleTimeAfternoon(value);
              }}
            />
            
          
        
      

      {/*  */}
      {/* Verspätungs Liste */}
      {timing.map((item) => {
        return (
          
            
              
                
              
              
            
          
        );
      })}
      {/* Krankmeldung */}
      {timingAfternoon.map((item) => {
        return (
          
            
              
                
              
              
            
          
        );
      })}
      {/* Verspätungs Nachmittag */}
      {sickDaysConfirm.map((item) => {
        return (
          
            
              
                
              
              
            
          
        );
      })}
    
  );
}

There is also a imagePicker from Expo, I was thinking of trying that but I'm just not sure.

Material UI Avatar Image Upload

Answers (1)

Related Questions