loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upload_file

Browse Source
This commit is contained in:
Yasiu1376
2023-07-22 15:51:44 +03:30
parent 176347fb4b
commit cd51ee14ab
11 changed files with 434 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/locales/fa/app.json
View File

@@ -172,5 +172,13 @@
"button-cancel": "بستن",
"description": "توضیحات",
"description_error": "وارد کردن توضیحات الزامی است!"
},
"UploadSystem": {
"upload_file": "آپلود فایل",
"delete": "پاک کردن",
"button-reject": "عدم تایید",
"button-cancel": "بستن",
"description": "توضیحات",
"description_error": "وارد کردن توضیحات الزامی است!"
}
}

30
src/components/dashboard/machinary-office/Form/ConfirmForm.jsx
View File

@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import UploadSystem from "@/core/components/UploadSystem";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
//formik
const validationSchema = Yup.object().shape({
@@ -47,6 +52,18 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
@@ -86,6 +103,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
sx={{ mt: 1 }}
fullWidth
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

31
src/components/dashboard/machinary-office/Form/RejectForm.jsx
View File

@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -39,6 +44,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +78,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

30
src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx
View File

@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import UploadSystem from "@/core/components/UploadSystem";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
//formik
const validationSchema = Yup.object().shape({
@@ -48,6 +53,18 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
}
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
@@ -88,6 +105,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
sx={{ mt: 1 }}
fullWidth
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

31
src/components/dashboard/passenger-boss/Form/RejectForm.jsx
View File

@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,6 +43,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
@@ -60,6 +78,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

84
src/components/dashboard/passenger-office/Form/ConfirmForm.jsx
View File

@@ -1,3 +1,4 @@
import UploadSystem from "@/core/components/UploadSystem";
import { CONFIRM_PASSENGER_OFFICE } from "@/core/data/apiRoutes";
import {
Dialog,
@@ -17,8 +18,11 @@ const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [fileData, setFileData] = useState(null);
const inputRef = useRef(null);
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const formik = useFormik({
initialValues: {
@@ -35,31 +39,23 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
},
});
const handleUploadClick = () => {
// 👇 We redirect the click event onto the hidden input element
inputRef.current?.click();
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleFileChange = (e) => {
const selectedFile = e.target.files[0];
if (selectedFile) {
const fileSizeInBytes = selectedFile.size;
if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
formik.setFieldError(
"fileData",
`File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
);
e.target.value = null;
} else {
setFileData(selectedFile);
formik.setFieldValue("fileData", selectedFile);
formik.setFieldError("fileData", "");
}
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
@@ -80,39 +76,19 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<div>
<label htmlFor="fileData">
<Button
variant="outlined"
color="primary"
onClick={handleUploadClick}
component="span"
sx={{ mt: 1, width: "100%" }}
>
{fileData ? (
<>
Name : {fileData.name}
<br />
Size : {fileData.size}
</>
) : (
<>{t("ConfirmDialog.choose_file")}</>
)}
</Button>
</label>
<input
id="fileData"
name="fileData"
type="file"
accept=".pdf, image/*"
ref={inputRef}
onChange={handleFileChange}
style={{ display: "none" }}
/>
</div>
<FormHelperText error={Boolean(formik.errors.fileData)}>
{formik.errors.fileData && formik.errors.fileData}
</FormHelperText>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

33
src/components/dashboard/passenger-office/Form/RejectForm.jsx
View File

@@ -12,11 +12,16 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
});
@@ -38,7 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +76,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

84
src/components/dashboard/province-manager/Form/ConfirmForm.jsx
View File

@@ -1,3 +1,4 @@
import UploadSystem from "@/core/components/UploadSystem";
import { CONFIRM_PROVINCE_MANAGER } from "@/core/data/apiRoutes";
import {
Dialog,
@@ -17,8 +18,10 @@ const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [fileData, setFileData] = useState(null);
const inputRef = useRef(null);
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const formik = useFormik({
initialValues: {
@@ -35,31 +38,21 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
},
});
const handleUploadClick = () => {
// 👇 We redirect the click event onto the hidden input element
inputRef.current?.click();
};
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleFileChange = (e) => {
const selectedFile = e.target.files[0];
if (selectedFile) {
const fileSizeInBytes = selectedFile.size;
if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
formik.setFieldError(
"fileData",
`File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
);
e.target.value = null;
} else {
setFileData(selectedFile);
formik.setFieldValue("fileData", selectedFile);
formik.setFieldError("fileData", "");
}
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("confirm_img", uploadedFile);
setShowAddIcon(false);
}
};
@@ -80,39 +73,20 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<div>
<label htmlFor="fileData">
<Button
variant="outlined"
color="primary"
onClick={handleUploadClick}
component="span"
sx={{ mt: 1, width: "100%" }}
>
{fileData ? (
<>
Name : {fileData.name}
<br />
Size : {fileData.size}
</>
) : (
<>{t("ConfirmDialog.choose_file")}</>
)}
</Button>
</label>
<input
id="fileData"
name="fileData"
type="file"
accept=".pdf, image/*"
ref={inputRef}
onChange={handleFileChange}
style={{ display: "none" }}
/>
</div>
<FormHelperText error={Boolean(formik.errors.fileData)}>
{formik.errors.fileData && formik.errors.fileData}
</FormHelperText>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="confirm_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

30
src/components/dashboard/province-manager/Form/RejectForm.jsx
View File

@@ -12,10 +12,15 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const t = useTranslations();
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")),
@@ -38,6 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
@@ -60,6 +77,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

31
src/components/dashboard/transportation-assistance/Form/RejectForm.jsx
View File

@@ -12,9 +12,14 @@ import { useTranslations } from "next-intl";
import { useFormik } from "formik";
import * as Yup from "yup";
import { useState } from "react";
import UploadSystem from "@/core/components/UploadSystem";
const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
const [description, setDescription] = useState("");
const [selectedImage, setSelectedImage] = useState("");
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const t = useTranslations();
const validationSchema = Yup.object().shape({
@@ -38,7 +43,18 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
setDescription(event.target.value);
formik.handleChange(event);
};
const handleUploadChange = (event) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile));
setfileType(fileType);
setfileName(fileName);
formik.setFieldValue("reject_img", uploadedFile);
setShowAddIcon(false);
}
};
return (
<Dialog open={open} onClose={handleClose}>
<DialogTitle>{t("RejectDialog.reject")}</DialogTitle>
@@ -60,6 +76,19 @@ const RejectForm = ({ open, handleClose, rowId, rejectData }) => {
variant="outlined"
sx={{ mt: 1 }}
/>
<UploadSystem
selectedImage={selectedImage}
handleUploadChange={handleUploadChange} // Pass the updated function directly
setselectedImage={setSelectedImage}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="reject_img"
fileType={fileType}
fileName={fileName}
imageAlt={t("app_name")}
imageSize={[250 /*width*/, 150 /*height*/]}
setShowAddIcon={setShowAddIcon}
showAddIcon={showAddIcon}
/>
</DialogContent>
<DialogActions>
<Button onClick={formik.handleSubmit} color="primary">

154
src/core/components/UploadSystem.jsx Normal file
View File

@@ -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;