upload_file

src/core/components/UploadSystem.jsx

@@ -0,0 +1,154 @@
+import { Box, Button, Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import { useRef } from "react";
+
+const UploadSystem = ({
+  selectedImage,
+  setselectedImage,
+  handleUploadChange,
+  fieldname,
+  setFieldValue,
+  imageAlt,
+  imageSize,
+  fileType,
+  fileName,
+  setShowAddIcon,
+  showAddIcon,
+}) => {
+  const t = useTranslations();
+  const fileInputRef = useRef(null);
+
+  const handleClick = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleDeleteImage = () => {
+    setselectedImage(null);
+    setFieldValue(fieldname, null);
+    setShowAddIcon(true);
+  };
+
+  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: 1 }}>
+      {showAddIcon ? (
+        // Show the add icon and "Upload File" text when no image is selected
+        <>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              border: "1px solid #b3b3b3",
+              borderRadius: "10px",
+              cursor: "pointer",
+              padding: "5px",
+              width: imageSize[0],
+              height: imageSize[1],
+            }}
+            onClick={handleClick}
+          >
+            <AddIcon sx={{ fontSize: "2rem", color: "#a19d9d" }} />
+            <Typography
+              variant="subtitle2"
+              sx={{
+                fontWeight: 600,
+                fontSize: "1rem",
+                color: "#a19d9d",
+                mt: 1,
+              }}
+              textAlign="center"
+            >
+              {t("UploadSystem.upload_file")}
+            </Typography>
+          </Box>
+        </>
+      ) : (
+        // Show the uploaded content along with the delete button when an image or document is selected
+        <>
+          {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 solid #b3b3b3",
+                borderRadius: "10px",
+                borderBottom: "unset",
+                padding: "5px",
+              }}
+            />
+          ) : (
+            fileType &&
+            isDocumentFormat(fileType) && (
+              <Box
+                sx={{
+                  width: imageSize[0],
+                  height: imageSize[1],
+                  display: "flex",
+                  border: "1px solid #b3b3b3",
+                  borderRadius: "10px",
+                  borderBottom: "unset",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+                onClick={handleClick}
+              >
+                <Typography
+                  margin={2}
+                  sx={{
+                    fontWeight: 600,
+                    fontSize: "1rem",
+                    color: "#a19d9d",
+                  }}
+                  textAlign="center"
+                >
+                  {fileName}
+                </Typography>
+              </Box>
+            )
+          )}
+          <Button
+            sx={{
+              width: "100%",
+            }}
+            color="error"
+            endIcon={<DeleteForeverIcon />}
+            variant="contained"
+            onClick={handleDeleteImage}
+          >
+            {t("UploadSystem.delete")}
+          </Button>
+        </>
+      )}
+      <input
+        type="file"
+        accept="image/*, .pdf, .doc, .docx, .xls, .xlsx"
+        style={{ display: "none" }}
+        onChange={handleUploadChange}
+        ref={fileInputRef}
+      />
+    </Box>
+  );
+};
+
+export default UploadSystem;