add image uploading and document uploading system by a reusable component named UploadSystem

src/core/components/UploadSystem.jsx

@@ -0,0 +1,163 @@
+import { Box, Button, TextField, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import { useRef } from "react";
+
+const UploadSystem = ({
+  selectedImage,
+  setselectedImage,
+  handleUploadChange,
+  fieldname,
+  setFieldValue,
+  imageAlt,
+  imageSize,
+  fileType,
+  fileName,
+}) => {
+  const t = useTranslations();
+  const fileInputRef = useRef(null);
+
+  const handleClick = () => {
+    fileInputRef.current.click();
+  };
+  const handleDeleteImage = () => {
+    setselectedImage("/images/upload-image.svg");
+    setFieldValue(fieldname, null);
+  };
+
+  const isDocumentFormat = (fileType) => {
+    const documentFormats = [
+      "application/pdf",
+      "application/msword",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      "application/vnd.ms-excel",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ];
+    return documentFormats.includes(fileType);
+  };
+
+  return (
+    <Box sx={{ width: imageSize[0], my: 2 }}>
+      {selectedImage === "/images/upload-image.svg" ? (
+        <Image
+          width={imageSize[0]}
+          height={imageSize[1]}
+          src={selectedImage}
+          priority
+          alt={imageAlt}
+          onClick={handleClick}
+          style={{
+            cursor: "pointer",
+            objectFit: "contain",
+            border: "1px dashed #e1e1e1",
+            borderBottom: "unset",
+            padding: "5px",
+          }}
+        />
+      ) : fileType && fileType.startsWith("image/") ? (
+        <Image
+          width={imageSize[0]}
+          height={imageSize[1]}
+          src={selectedImage}
+          priority
+          alt={imageAlt}
+          onClick={handleClick}
+          style={{
+            cursor: "pointer",
+            objectFit: "contain",
+            border: "1px dashed #e1e1e1",
+            borderBottom: "unset",
+            padding: "5px",
+          }}
+        />
+      ) : (
+        fileType &&
+        isDocumentFormat(fileType) && (
+          <Box
+            sx={{
+              width: imageSize[0],
+              height: imageSize[1],
+              display: "flex",
+              border: "1px dashed #e1e1e1",
+              borderBottom: "unset",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Typography
+              margin={2}
+              sx={{
+                fontWeight: 600,
+                fontSize: "1rem",
+                color: "#a19d9d",
+              }}
+              textAlign="center"
+            >
+              {fileName}
+            </Typography>
+          </Box>
+        )
+      )}
+
+      <TextField
+        id="avatar-upload"
+        type="file"
+        accept="image/*"
+        style={{ display: "none" }}
+        onChange={handleUploadChange}
+        inputRef={fileInputRef}
+      />
+      <Button
+        sx={{
+          width: "100%",
+          borderTopLeftRadius: "unset",
+          borderTopRightRadius: "unset",
+        }}
+        color="error"
+        disabled={selectedImage === "/images/upload-image.svg"}
+        endIcon={<DeleteForeverIcon />}
+        variant="contained"
+        onClick={handleDeleteImage}
+      >
+        {t("delete")}
+      </Button>
+    </Box>
+  );
+};
+
+export default UploadSystem;
+
+
+
+//////****** usage document ******/////////
+// 1.) use <UploadSystem /> component inside your page
+// 2.) list of props that you need to send is down below
+// 2.1) selectedImage // this value come from useState that you need to write on your own component
+// 2.2) handleUploadChange // use on your own component (explain below more) you should set it to {(e) =>handleUploadChange[your special name]](e, props.setFieldValue)}
+// 2.3) setFieldValue // for setting value of file to null when user click on Delete button. you should set it to {props.setFieldValue}
+// 2.4) fieldname   name that file field has on your formik initialValues.
+// 2.5) fileType // type of your file shows its document image etc...
+// 2.6) imageAlt // alt of your image.
+// 2.7) imageSize // this is size of your image box and value type is like that imageSize={ [width , height] }.
+// 2.9) setselectedImage // for making box empty when user click on delete button (explain below more)
+
+// const [selectedImage[your special name]], setSelectedImage[your special name]] = useState(
+//  "/images/upload-image.svg" // default image
+// );
+// const [fileType[your special name], setFileType[your special name]] = useState(null);
+// const [fileName[your special name], setFileName[your special name]] = useState(null);
+
+
+// const handleUploadChange[your special name]] = (event, setFieldValue) => {
+//   const uploadedFile = event.target?.files?.[0];
+//   const fileType = event.target.files[0].type;
+//   const fileName = event.target.files[0].name;
+//   if (uploadedFile) { // just check file is uploaded or not
+//     setSelectedImage[your special name]](URL.createObjectURL(uploadedFile)); // set image value
+//     setFileType[your special name]](fileType); // set fileType
+//     setFileName[your special name]](fileName); // set fileName
+//     setFieldValue("[your special name]]_img", uploadedFile); set field value for sending data (this automaticaly append value in initial state)
+//   }
+// };
+//////****** end usage document ******/////////