added family profile image upload

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -66,6 +66,8 @@ export default function FamilyManageTabs({
   // State for family task popout
   const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
 
+  let [uploadStatus, setUploadStatus] = useState({loading: false, status: false, message:''}) // HOLDS STATE FOR UPLOAD PROFILE PICTURE STATUS
+
   // State for profile image
   const [profileImg, setProfileImg] = useState(profile);
 
@@ -90,24 +92,83 @@ export default function FamilyManageTabs({
    * Checks if the selected file exceeds the maximum file size limit and displays an alert if it does.
    * If the file is within the size limit, it reads the file using the FileReader API and sets the profile image state with the result.
    */
-  const profileImgChangeHandler = (e) => {
+  // const profileImgChangeHandler = (e) => {
-    const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+  //   const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 
-    const file = e.target.files[0];
+  //   const file = e.target.files[0];
-    if (file && file.size > MAX_FILE_SIZE) {
+  //   if (file && file.size > MAX_FILE_SIZE) {
-      alert("File size exceeds the limit.");
+  //     alert("File size exceeds the limit.");
-      return;
+  //     return;
+  //   }
+
+  //   if (file) {
+  //     const imgReader = new FileReader();
+  //     imgReader.onload = () => {
+  //       const imageDataUrl = imgReader.result;
+
+  //       // Set the profile image
+  //       setProfileImg(imageDataUrl);
+  //     };
+  //     imgReader.readAsDataURL(file);
+  //   }
+  // };
+
+  const profileImgChangeHandler = (e) => {
+    setUploadStatus({loading: false, status: false, message:''})
+    let acceptedFormat = ["jpeg", "jpg", "png", "bmp", "gif"] // ARRAY OF SUPPORTED FORMATS
+    let uploadedFile = e.target.files[0] //UPLOADED FILE
+
+    if(!acceptedFormat.includes(uploadedFile?.type?.split("/")[1]?.toLowerCase())){ //CHECKING FOR CORRECT UPLOAD FORMAT
+      let msg = 'Please select '
+      for(let i=0; i<=acceptedFormat.length-1; i++){
+        if(i == acceptedFormat.length-1){
+          msg+=`or ${acceptedFormat[i]}`
+        }else{
+          msg+=`${acceptedFormat[i]}, `
+        }
+      }
+      setUploadStatus({loading: false, status: false, message:msg})
+      return setTimeout(()=>{
+        profileImgInput.current.value = '' // clear the input
+        setUploadStatus({loading: false, status: false, message:''})
+      },5000)
     }
 
-    if (file) {
+    if(uploadedFile.size > 5*1048576){ // CHECKING FOR CORRECT FILE SIZE
-      const imgReader = new FileReader();
+      setUploadStatus({loading: false, status: false, message:'File must not exceed 5MB'})
-      imgReader.onload = () => {
+      return setTimeout(()=>{
-        const imageDataUrl = imgReader.result;
+        profileImgInput.current.value = '' // clear the input
+        setUploadStatus({loading: false, status: false, message:''})
+      },5000)
+    }
 
-        // Set the profile image
+    if (e.target.value !== "") {
-        setProfileImg(imageDataUrl);
+      const imgReader = new FileReader();
+      imgReader.onload = (event) => {
+        let reqData = { // PAYLOAD FOR API CALL
+          file_name: uploadedFile?.name,
+          file_size: uploadedFile?.size,
+          file_type: uploadedFile?.type?.split("/")[0]?.toLowerCase(),
+          file_data: event?.target?.result,
+          msg_type: 'FILE',
+          action: 11300
+        }
+        setUploadStatus({loading: true, status: false, message:'Loading...'})
+        apiCall.sendFiles(reqData).then(res=>{
+          if(res.status != 200 || res.data.internal_return < 0){
+            return setUploadStatus({loading: false, status: false, message: 'Something went wrong, try again'})
+          }
+          setUploadStatus({loading: false, status: true, message: 'Uploaded successfully'})
+          setProfileImg(event.target.result);
+        }).catch(error=>{
+          setUploadStatus({loading: false, status: false, message: 'Network error, try again'})
+        }).finally(()=>{
+          setTimeout(()=>{
+            setUploadStatus({loading: false, status: false, message: ''})
+          },5000)
+        })
       };
-      imgReader.readAsDataURL(file);
+      imgReader.readAsDataURL(e.target.files[0]);
     }
   };
 
@@ -298,6 +359,7 @@ export default function FamilyManageTabs({
                 profileImgChangeHandler={profileImgChangeHandler}
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
+                uploadStatus={uploadStatus}
               />
               <div className="mt-4 flex flex-col justify-center items-center gap-2 lg:flex-row lg:justify-center lg:items-center xl:flex-col xl:justify-center xl:items-center 2xl:flex-row 2xl:justify-center 2xl:items-center 2xl:gap-[2px]">
                 <button

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

@@ -7,6 +7,7 @@ export default function ProfileInfo({
   profileImgChangeHandler,
   browseProfileImg,
   accountDetails,
+  uploadStatus
 }) {
   // console.log(accountDetails.banner)
   return (
@@ -52,6 +53,11 @@ export default function ProfileInfo({
           </div>
         </div>
       </div>
+      {/* DISPLAYS PROFILE UPLOADING STATUS */}
+      <div className="w-full">
+        {uploadStatus.message && !uploadStatus.loading && <p className={`text-center ${uploadStatus.status ? 'text-green-500':'text-red-500'}`}>{uploadStatus.message}</p>}
+        {uploadStatus.loading && <p className="text-center">{uploadStatus.message}</p>}
+      </div>
       <div className="flex flex-col justify-center gap-3 items-center">
         <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
           {accountDetails?.firstname}