Removed ref

Client/src/Components/Avatar/index.jsx

@@ -2,7 +2,7 @@ import { Avatar as MuiAvatar } from "@mui/material";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
 import { useEffect, useState } from "react";
-import { bufferTo64 } from "../../Utils/fileUtils";
+import { bufferTo64, bufferToUrl } from "../../Utils/fileUtils";
 
 /**
  * @component
@@ -24,24 +24,25 @@ const Avatar = ({ src, small, sx }) => {
 
   const [image, setImage] = useState();
   useEffect(() => {
-    const fetchImage = async () => {
-      if (user.profileImage.data && user.profileImage.contentType) {
-        try {
-          const base64 = await bufferTo64(user.profileImage.data);
-          setImage(base64);
-        } catch (error) {
-          console.error("Error converting buffer to base64:", error);
+    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);
       }
     };
-    fetchImage();
+
+    fetchData();
   }, [user]);
 
   return (
     <MuiAvatar
       alt={`${user?.firstname} ${user?.lastname}`}
       src={
-        src === null
+        src === "placeholder"
           ? "/static/images/avatar/2.jpg"
           : src
           ? src

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -54,9 +54,6 @@ const ProfilePanel = () => {
     });
   };
 
-  const [isOpen, setIsOpen] = useState("");
-  const isModalOpen = (name) => isOpen === name;
-
   const handleChange = (event) => {
     const { value, id } = event.target;
     const name = idToName[id];
@@ -68,9 +65,8 @@ const ProfilePanel = () => {
     validateField({ [name]: value }, editProfileValidation, name);
   };
 
-  const fileRef = useRef();
+  const [file, setFile] = useState();
   const intervalRef = useRef(null);
-  const [src, setSrc] = useState();
   const [progress, setProgress] = useState({ value: 0, isLoading: false });
   const handlePicture = (event) => {
     const pic = event.target.files[0];
@@ -81,7 +77,11 @@ const ProfilePanel = () => {
     if (error) return;
 
     setProgress((prev) => ({ ...prev, isLoading: true }));
-    setSrc(URL.createObjectURL(fileRef.current.files[0]));
+    setFile({
+      src: URL.createObjectURL(pic),
+      name: pic.name,
+      size: formatBytes(pic.size),
+    });
 
     //TODO - potentitally remove once image compression functions are implemented above
     intervalRef.current = setInterval(() => {
@@ -109,11 +109,7 @@ const ProfilePanel = () => {
 
   const removePicture = () => {
     clearError("picture");
-    if (fileRef.current && fileRef.current.files[0]) {
-      fileRef.current.value = "";
-      URL.revokeObjectURL(fileRef.current?.files[0]);
-      setSrc();
-    }
+    setFile({ src: "placeholder" });
     //interrupt interval if image upload is canceled prior to completing the process
     clearInterval(intervalRef.current);
     setProgress({ value: 0, isLoading: false });
@@ -127,16 +123,16 @@ const ProfilePanel = () => {
     setProgress({ value: 0, isLoading: false });
     setLocalData((prev) => ({
       ...prev,
-      profileImage: fileRef.current?.files[0],
+      profileImage: null,
     }));
     setIsOpen("");
   };
   const handleDeletePicture = () => {
+    setFile({ src: "placeholder" });
     setLocalData((prev) => ({
       ...prev,
       profileImage: null,
     }));
-    setSrc(null);
   };
 
   //TODO - implement delete account function
@@ -156,6 +152,12 @@ const ProfilePanel = () => {
     //TODO - add toast confirmation
   };
 
+  //modal controllers
+  const [isOpen, setIsOpen] = useState("");
+  const isModalOpen = (name) => isOpen === name;
+
+  // console.log(document.querySelector('input[type="file"]')?.files[0]);
+
   return (
     <TabPanel value="profile">
       <form className="edit-profile-form" noValidate spellCheck="false">
@@ -240,7 +242,7 @@ const ProfilePanel = () => {
             </Typography>
           </Stack>
           <Stack className="row-stack" direction="row" alignItems="center">
-            <Avatar src={src} sx={{ mr: "8px" }} />
+            <Avatar src={file?.src} sx={{ mr: "8px" }} />
             <Button
               level="tertiary"
               label="Delete"
@@ -376,16 +378,15 @@ const ProfilePanel = () => {
           </Typography>
           <ImageField
             id="update-profile-picture"
-            src={src}
+            src={file?.src}
             loading={progress.isLoading && progress.value !== 100}
             onChange={handlePicture}
-            ref={fileRef}
           />
           {progress.isLoading || progress.value !== 0 || errors["picture"] ? (
             <ProgressUpload
               icon={<ImageIcon />}
-              label={fileRef.current?.files[0]?.name}
-              size={formatBytes(fileRef.current?.files[0]?.size)}
+              label={file.name}
+              size={file.size}
               progress={progress.value}
               onClick={removePicture}
               error={errors["picture"]}

Client/src/Components/TextFields/Image/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, forwardRef } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { Box, IconButton, Stack, TextField, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
@@ -14,7 +14,7 @@ import { checkImage } from "../../../Utils/fileUtils";
  * @returns {JSX.Element} The rendered component.
  */
 
-const ImageField = forwardRef(({ id, src, loading, onChange }, ref) => {
+const ImageField = ({ id, src, loading, onChange }) => {
   const theme = useTheme();
 
   const [isDragging, setIsDragging] = useState(false);
@@ -26,87 +26,81 @@ const ImageField = forwardRef(({ id, src, loading, onChange }, ref) => {
   };
 
   return (
-    <Box>
-      <Box
-        className="image-field-wrapper"
-        mt="20px"
-        sx={{
-          display: !checkImage(src) || loading ? "block" : "none",
-          position: "relative",
-          height: "fit-content",
-          border: "dashed",
-          borderRadius: `${theme.shape.borderRadius}px`,
-          borderColor: isDragging
-            ? theme.palette.primary.main
-            : theme.palette.otherColors.graishWhite,
-          borderWidth: "2px",
-          transition: "0.2s",
-          "&:hover": {
-            borderColor: theme.palette.primary.main,
-            backgroundColor: "hsl(215, 87%, 51%, 0.05)",
-          },
-        }}
-        onDragEnter={handleDragEnter}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDragLeave}
-      >
-        <TextField
-          id={id}
-          type="file"
-          onChange={onChange}
-          inputRef={ref}
-          sx={{
-            width: "100%",
-            "& .MuiInputBase-input[type='file']": {
-              opacity: 0,
-              cursor: "pointer",
-              maxWidth: "500px",
-              minHeight: "175px",
-            },
-            "& fieldset": {
-              padding: 0,
-              border: "none",
-            },
-          }}
-        />
-        <Stack
-          className="custom-file-text"
-          alignItems="center"
-          gap="4px"
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            zIndex: "-1",
-            width: "100%",
-          }}
-        >
-          <IconButton
+    <>
+      {!checkImage(src) || loading ? (
+        <>
+          <Box
+            className="image-field-wrapper"
+            mt="20px"
             sx={{
-              pointerEvents: "none",
+              position: "relative",
+              height: "fit-content",
+              border: "dashed",
               borderRadius: `${theme.shape.borderRadius}px`,
-              border: `solid ${theme.shape.borderThick}px ${theme.palette.otherColors.graishWhite}`,
-              boxShadow: theme.shape.boxShadow,
+              borderColor: isDragging
+                ? theme.palette.primary.main
+                : theme.palette.otherColors.graishWhite,
+              borderWidth: "2px",
+              transition: "0.2s",
+              "&:hover": {
+                borderColor: theme.palette.primary.main,
+                backgroundColor: "hsl(215, 87%, 51%, 0.05)",
+              },
             }}
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDragLeave}
           >
-            <CloudUploadIcon />
-          </IconButton>
-          <Typography component="h2">
-            <span>Click to upload</span> or drag and drop
-          </Typography>
-          <Typography component="p">(maximum size: 3MB)</Typography>
-        </Stack>
-      </Box>
-      <Typography
-        component="p"
-        sx={{
-          display: !checkImage(src) || loading ? "block" : "none",
-        }}
-      >
-        Supported formats: JPG, PNG
-      </Typography>
-      {checkImage(src) && !loading ? (
+            <TextField
+              id={id}
+              type="file"
+              onChange={onChange}
+              sx={{
+                width: "100%",
+                "& .MuiInputBase-input[type='file']": {
+                  opacity: 0,
+                  cursor: "pointer",
+                  maxWidth: "500px",
+                  minHeight: "175px",
+                },
+                "& fieldset": {
+                  padding: 0,
+                  border: "none",
+                },
+              }}
+            />
+            <Stack
+              className="custom-file-text"
+              alignItems="center"
+              gap="4px"
+              sx={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                zIndex: "-1",
+                width: "100%",
+              }}
+            >
+              <IconButton
+                sx={{
+                  pointerEvents: "none",
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                  border: `solid ${theme.shape.borderThick}px ${theme.palette.otherColors.graishWhite}`,
+                  boxShadow: theme.shape.boxShadow,
+                }}
+              >
+                <CloudUploadIcon />
+              </IconButton>
+              <Typography component="h2">
+                <span>Click to upload</span> or drag and drop
+              </Typography>
+              <Typography component="p">(maximum size: 3MB)</Typography>
+            </Stack>
+          </Box>
+          <Typography component="p">Supported formats: JPG, PNG</Typography>
+        </>
+      ) : (
         <Stack direction="row" justifyContent="center">
           <Box
             sx={{
@@ -119,12 +113,10 @@ const ImageField = forwardRef(({ id, src, loading, onChange }, ref) => {
             }}
           ></Box>
         </Stack>
-      ) : (
-        ""
       )}
-    </Box>
+    </>
   );
-});
+};
 
 ImageField.propTypes = {
   id: PropTypes.string.isRequired,

Client/src/Utils/fileUtils.js

@@ -21,3 +21,11 @@ export const bufferTo64 = (bufferData) => {
     reader.readAsDataURL(blob);
   });
 };
+
+export const bufferToUrl = (buffer) => {
+  console.log(buffer);
+  const blob = new Blob([buffer.data], { type: buffer.contentType });
+  const url = URL.createObjectURL(blob);
+
+  return url;
+};