Profile Image editiing api

src/Layouts/DefaultLayout.tsx

@@ -14,6 +14,8 @@ import { useLogOutMutation } from "../Redux/Service/apiSlice";
 import ProgressBar from "../components/ProgressBar/ProgressBar";
 import { useGetProfileQuery } from "../Redux/Service/profile.password";
 
+const PROFILEIMGURL = import.meta.env.VITE_IMG_PROFILE
+
 const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
   const { data } = useGetProfileQuery()
   const dispatch = useDispatch()
@@ -80,7 +82,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
 
             {/* <NavLink to={'/manage-notification'}><RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} /></NavLink> */}
             <HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
-              <Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
+              <Avatar size={'sm'} src={`${PROFILEIMGURL}${data?.data.profile_photo}`} />
               <VStack color={'#013e3e'} gap={0} alignItems={'flex-start'}>
                 <Text fontSize={'sm'} fontWeight={'bold'}>{data?.data?.first_name ? `${data?.data?.first_name.charAt(0).toUpperCase()}${data?.data.first_name.slice(1)}` : ''}</Text>
                 <Text fontSize={'xs'} >{data?.data?.phone_number ? data?.data?.phone_number : ''}</Text>

src/Pages/Profile/Profile.tsx

@@ -6,9 +6,78 @@ import { Field } from "../../components/ui/field";
 // import Changepassword from "./ChangePassword";
 import EnterPassword from "./EnterPassword";
 import { useGetProfileQuery } from "../../Redux/Service/profile.password";
+// import { useUpdateImageMutation } from "../../Redux/Service/myprofie.service";
+import { useEffect, useRef, useState } from "react";
+import { Toaster, toaster } from "../../components/ui/toaster";
+import axios from "axios";
+
+const APIURL = import.meta.env.VITE_API_URL
+const PROFILEIMGURL = import.meta.env.VITE_IMG_PROFILE
 
 const Profile = () => {
-  const { data } = useGetProfileQuery()
+  const { data, refetch } = useGetProfileQuery()
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [avatarSrc, setAvatarSrc] = useState<string>("");
+  // const [updateImage] = useUpdateImageMutation();
+
+  useEffect(() => {
+    if (data?.data.profile_photo) {
+      setAvatarSrc(data.data.profile_photo);
+    }
+  }, [data?.data.profile_photo]);
+
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > 2 * 1024 * 1024) {
+      alert("File size exceeds 2MB limit.");
+      return;
+    }
+
+    // Preview the image
+    const previewUrl = URL.createObjectURL(file);
+    setAvatarSrc(previewUrl);
+
+    // Prepare FormData
+    const formData = new FormData();
+    formData.append("profile_photo", file, file.name);
+
+    const token = localStorage.getItem("token");
+
+    try {
+      if (token) {
+        await axios.post(`${APIURL}/profile-image-edit`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            'access-token': `${token}`,
+          },
+          // withCredentials: true,
+        });
+
+        toaster.create({
+          title: "Success",
+          description: "Updated successfully",
+          type: "success",
+        });
+        refetch();
+      }
+    } catch (error) {
+      console.error("Error updating image:", error);
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
+    }
+  };
+
+
   console.log('PROFILE DATA:', data?.data);
 
   return (
@@ -20,10 +89,11 @@ const Profile = () => {
           <HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'} w={'100%'} px={3} py={3} >
             <VStack w={'100%'} alignItems={'flex-start'} gap={0}>
               <Box mb={2} position="relative" width="fit-content"
-                cursor="pointer" onClick={() => alert("Avatar clicked!")}>
-                <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
+                cursor="pointer" onClick={handleClick}>
+                <Avatar.Root size={"2xl"} style={{ display: "flex", width: "50px", height: '50px', justifyContent: 'center' }}>
                   <Avatar.Fallback />
-                  <Avatar.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
+                  {/* <Avatar.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" /> */}
+                  {avatarSrc && <Avatar.Image src={`${PROFILEIMGURL}${avatarSrc}`} />}
                 </Avatar.Root>
                 <Box
                   position="absolute"
@@ -33,6 +103,13 @@ const Profile = () => {
                 >
                   <FaCamera color="#ccc" size={16} />
                 </Box>
+                <input
+                  type="file"
+                  accept="image/*"
+                  ref={fileInputRef}
+                  style={{ display: "none" }}
+                  onChange={handleFileChange}
+                />
               </Box>
               <Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>{`${data?.data?.first_name.charAt(0).toUpperCase()}${data?.data.first_name.slice(1)}`}
               </Text>
@@ -63,7 +140,7 @@ const Profile = () => {
         </VStack>
 
       </HStack>
-
+      <Toaster />
     </MainFrame >
   )
 }

src/Redux/Service/myprofie.service.ts

@@ -1,4 +1,4 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";
 
 export const myProfile = createApi({
@@ -8,7 +8,22 @@ export const myProfile = createApi({
 
 
 
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+    // getPosts: builder.query<Post[], void>({ query: () => "/profile-image-edit" }),
+
+updateImage: builder.mutation({
+  query: (formData: FormData) => {
+    const token = localStorage.getItem("token");
+
+    return {
+      url: "/profile-image-edit",
+      method: "POST",
+      body: formData,
+      headers: {
+        "access-token": `${token}`,
+      },
+    };
+  },
+}),
 
 
 
@@ -17,10 +32,6 @@ export const myProfile = createApi({
   }),
 });
 
-  export const {  } = myProfile;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+export const {
+  useUpdateImageMutation,
+} = myProfile;