diff --git a/Client/src/Components/Avatar/index.jsx b/Client/src/Components/Avatar/index.jsx index ffe2934c6..99a6c1542 100644 --- a/Client/src/Components/Avatar/index.jsx +++ b/Client/src/Components/Avatar/index.jsx @@ -23,33 +23,18 @@ const Avatar = ({ src, small, sx }) => { const border = small ? 1 : 3; const [image, setImage] = useState(); - // useEffect(() => { - // const fetchData = async () => { - // try { - // if (user.profileImage.data && user.profileImage.contentType) { - // const url = await bufferToUrl(user.profileImage); - // setImage(url); - // } - // } catch (error) { - // console.error("Error converting buffer to URL: ", error); - // } - // }; - - // fetchData(); - // }, [user]); + useEffect(() => { + if (user.avatarImage) { + setImage(`data:image/png;base64,${user.avatarImage}`); + } + }, [user?.avatarImage]); return ( { // Resets picture-related states and clears interval const removePicture = () => { errors["picture"] && clearError("picture"); - setFile({ src: "placeholder" }); clearInterval(intervalRef.current); // interrupt interval if image upload is canceled prior to completing the process setProgress({ value: 0, isLoading: false }); }; @@ -154,7 +153,6 @@ const ProfilePanel = () => { // Removes current profile image from UI const handleDeletePicture = () => { - setFile({ src: "placeholder" }); // TODO - implement delete picture function }; diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js index bfb2dfd27..bec0f3035 100644 --- a/Client/src/Features/Auth/authSlice.js +++ b/Client/src/Features/Auth/authSlice.js @@ -48,7 +48,7 @@ export const update = createAsyncThunk( await new Promise((resolve) => setTimeout(resolve, 1500)); const fd = new FormData(); - const imageResult = await axios.get(form.file); + const imageResult = await axios.get(form.file, { responseType: "blob" }); fd.append("firstname", form.firstname); fd.append("lastname", form.lastname); fd.append("profileImage", imageResult.data);