src/component/layout/layoutcom/UserHeader.jsx

@@ -74,7 +74,11 @@ export default function UserHeader(){
                         <ul className="navbar-nav nav-right ml-auto">
                             <li className="nav-item user-profile">
                                 <a onClick={toggleMenu} className="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdow">
-                                    <img src={getImage('profile-pic-circle.png')} alt="avtar-img" />
+                                    <img 
+                                        src={userDetails?.picture ? userDetails?.picture : getImage('profile-pic-circle.png')}
+                                        // src={getImage('profile-pic-circle.png')} 
+                                        alt="avtar-img" 
+                                    />
                                     <span className="bg-success user-status"></span>
                                 </a>
                                 <div ref={nav_menu} onClick={toggleMenu} className="dropdown-menu animated fadeIn">

src/component/settings/ProfileForm.jsx

@@ -52,7 +52,7 @@ export default function ProfileForm({data}) {
         },
         onSuccess: (res) => {
             if(res.data.resultCode != '0'){
-                throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'En error occured'})
+                throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'An error occured'})
             }
             const account_name = res?.data?.personal_data?.account_name
             dispatch(updateUserDetails({ account_name }));

src/component/settings/ProfileImage.jsx

@@ -0,0 +1,117 @@
+import React, { memo, useRef, useState } from 'react'
+// import { useSelector } from 'react-redux';
+import getImage from '../../utils/getImage';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { uploadProfileImg } from '../../services/services';
+import queryKeys from '../../services/queryKeys';
+
+const ProfileImage = memo(({intialData}) => {
+
+    const queryClient = useQueryClient()
+
+    const [selectedImg, setSelectedImg] = useState(null)
+    
+    // const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS FOR ACTIVE USER DETAILS
+    const avtarImage = "avtar/merms-user.png";
+
+      // browser profile img
+    const browserImg = useRef(null);
+    const browseProfileImg = () => {
+        browserImg.current.click();
+    };
+
+    const profileImgChangeHandler = (event) => {
+        setSelectedImg(event.target.files[0])
+    }
+
+    const uploadProfileMutation = useMutation({
+        mutationFn: (fields) => {
+            if(!fields.img){
+                throw new Error('Please, select an image')
+            }
+            return uploadProfileImg(fields)
+        },
+        onSuccess: (res) => {
+            if(res.data.resultCode != '0'){
+                throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'An error occured'})
+            }
+            // const account_name = res?.data?.personal_data?.account_name
+            // dispatch(updateUserDetails({ account_name }));
+        },
+        onSettled: ()=>{
+            setTimeout(() => {
+                queryClient.refetchQueries({
+                    queryKey: [...queryKeys.profile_data], // type: 'active', // exact: true,
+                })
+                uploadProfileMutation.reset()
+            }, 3000);
+        }
+    })
+
+    const proceedToUpload = () => {
+        let reqData = {
+            token: localStorage.getItem('token'), // USER TOKEN
+            uid: localStorage.getItem('uid'), // USER UID
+            img: selectedImg
+        }
+        // console.log('reqData', reqData)
+        uploadProfileMutation.mutate(reqData)
+    }
+
+      return (
+            <div className="col-xl-3 pb-xl-0 pb-5 border-right">
+                <div className="page-account-profil pt-5">
+                    <div className="profile-img text-center rounded-circle">
+                        <div className="pt-5">
+                            <div className="bg-img m-auto">
+                                <img 
+                                    src={selectedImg ? URL.createObjectURL(selectedImg) : intialData?.personal_data?.picture ? intialData?.personal_data?.picture : getImage(avtarImage)}
+                                    // src={getImage(avtarImage)}
+                                    className="img-fluid" alt="user"
+                                />
+                                <input 
+                                    ref={browserImg}
+                                    className='d-none' 
+                                    type='file' 
+                                    accept="image/*"
+                                    onChange={(e) => profileImgChangeHandler(e)}
+                                    id='profile-image'
+                                />
+                            </div>
+                            <div className="profile pt-4">
+                                <h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
+                                <div style={{padding: '10px'}}>
+                                    <hr/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div className="profile-btn text-center">
+                        <div>
+                            <button onClick={browseProfileImg} className="btn btn-light text-primary mb-2">Change
+                            </button>
+                        </div>
+                        {selectedImg &&
+                        <div>
+                            <button onClick={proceedToUpload} disabled={uploadProfileMutation.isSuccess || uploadProfileMutation.isPending} className="btn btn-light text-primary mb-2">
+                                {uploadProfileMutation.isPaused ? 'Upload...' : 'Upload New Avatar'}
+                            </button>
+                        </div>
+                        }
+                        {/* success or error message */}
+                        {(uploadProfileMutation.isSuccess || uploadProfileMutation.isError) &&
+                        <div>
+                            <p className={`${uploadProfileMutation.isSuccess ? 'text-success' : 'text-danger'}`}>
+                                {uploadProfileMutation.isSuccess ? 'Uploaded successfully' : uploadProfileMutation.error.message}
+                            </p>
+                        </div>
+                        }
+                    </div>
+                </div>
+            </div>
+      )
+    }
+)
+
+export default ProfileImage

src/component/settings/Settings.jsx

@@ -6,9 +6,9 @@ import { useQuery } from "@tanstack/react-query";
 import { profileDetails } from "../../services/services";
 import ProfileForm from "./ProfileForm";
 import LinksForm from "./LinksForm";
+import ProfileImage from "./ProfileImage";
 
 export default function Settings() {
-    const avtarImage = "avtar/merms-user.png";
 
     const [intialData, setInitialData] = useState({
         external_links: {},
@@ -59,36 +59,7 @@ export default function Settings() {
                         <div className="card card-statistics">
                             <div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
                                 <div className="row no-gutters">
-                                    <div className="col-xl-3 pb-xl-0 pb-5 border-right">
-                                        <div className="page-account-profil pt-5">
-                                            <div className="profile-img text-center rounded-circle">
-                                                <div className="pt-5">
-                                                    <div className="bg-img m-auto">
-                                                        {/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/}
-                                                        {/*     alt="users-avatar" />*/}
-                                                        <img src={getImage(avtarImage)}
-                                                            className="img-fluid" alt="user"/>
-                                                    </div>
-                                                    <div className="profile pt-4">
-                                                        <h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
-                                                        <div style={{padding: '10px'}}>
-                                                            <hr/>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-
-                                            <div className="profile-btn text-center">
-                                                <div>
-                                                    <button className="btn btn-light text-primary mb-2">Upload New Avatar
-                                                    </button>
-                                                </div>
-                                                {/*<div>*/}
-                                                {/*    <button className="btn btn-danger">Delete</button>*/}
-                                                {/*</div>*/}
-                                            </div>
-                                        </div>
-                                    </div>
+                                    <ProfileImage intialData={intialData} />
                                     <div className="col-xl-5 col-md-6 col-12 border-t border-right">
                                         <div className="page-account-form">
                                             <div className="form-titel border-bottom p-3">

src/services/services.js

@@ -23,7 +23,16 @@ axios.interceptors.request.use(
 
 const postAuxEnd = (path, postData, media=false) => {
     const basePath = media ? process.env.REACT_APP_MAIN_API : process.env.REACT_APP_MAIN_API
-    return axios.post(`${basePath}${path}`, postData).then(res => {
+    let newPostData = {}
+    if(!media){
+        newPostData = {...postData}
+    }else{
+        newPostData = new FormData();
+        for (let data in postData) {
+        newPostData.append(data, postData[data]);
+        }
+    }
+    return axios.post(`${basePath}${path}`, newPostData).then(res => {
         return res
     }).catch(err => {
         // throw new Error(err.response.data.error_message);
@@ -284,6 +293,15 @@ export const setExternalURL = (reqData) => {
     return postAuxEnd('/panel/myproduct/external-url', postData, false)
 }
 
+// FUNCTION TO UPLOAD PROFILE IMAGE
+export const uploadProfileImg = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    throw new Error('Opps')
+    // return postAuxEnd(`/panel/account/profile-update`, postData, true)
+}
+