recode and add editor config file
This commit is contained in:
Amirhossein Mahmoodi
@@ -1,176 +1,175 @@
|
||||
import { Box, Button, Paper, Typography } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Image from "next/image";
|
||||
import {Box, Button, Paper, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
|
||||
import { useRef } from "react";
|
||||
import {useRef} from "react";
|
||||
|
||||
const UploadSystem = ({
|
||||
selectedImage,
|
||||
setselectedImage,
|
||||
handleUploadChange,
|
||||
fieldname,
|
||||
setFieldValue,
|
||||
imageAlt,
|
||||
imageSize,
|
||||
fileType,
|
||||
fileName,
|
||||
setShowAddIcon,
|
||||
showAddIcon,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const fileInputRef = useRef(null);
|
||||
selectedImage,
|
||||
setselectedImage,
|
||||
handleUploadChange,
|
||||
fieldname,
|
||||
setFieldValue,
|
||||
imageAlt,
|
||||
imageSize,
|
||||
fileType,
|
||||
fileName,
|
||||
setShowAddIcon,
|
||||
showAddIcon,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
const handleClick = () => {
|
||||
fileInputRef.current.click();
|
||||
};
|
||||
const handleClick = () => {
|
||||
fileInputRef.current.click();
|
||||
};
|
||||
|
||||
const handleDeleteImage = () => {
|
||||
setselectedImage(null);
|
||||
setFieldValue(fieldname, null);
|
||||
setShowAddIcon(true);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
const handleDeleteImage = () => {
|
||||
setselectedImage(null);
|
||||
setFieldValue(fieldname, null);
|
||||
setShowAddIcon(true);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
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: "100%", 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",
|
||||
return (
|
||||
<Box sx={{width: "100%", 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",
|
||||
|
||||
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/") ? (
|
||||
<Box
|
||||
width="100%"
|
||||
height={imageSize[1]}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
objectFit: "contain",
|
||||
border: "1px solid #b3b3b3",
|
||||
borderTopRightRadius: "10px",
|
||||
borderTopLeftRadius: "10px",
|
||||
borderBottom: "unset",
|
||||
padding: "5px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundSize: "contain",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center",
|
||||
backgroundImage: `url(${selectedImage})`,
|
||||
}}
|
||||
></Paper>
|
||||
</Box>
|
||||
) : (
|
||||
fileType &&
|
||||
isDocumentFormat(fileType) && (
|
||||
<Box
|
||||
sx={{
|
||||
height: imageSize[1],
|
||||
display: "flex",
|
||||
border: "1px solid #b3b3b3",
|
||||
borderTopRightRadius: "10px",
|
||||
borderTopLeftRadius: "10px",
|
||||
borderBottom: "unset",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
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>
|
||||
);
|
||||
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/") ? (
|
||||
<Box
|
||||
width="100%"
|
||||
height={imageSize[1]}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
objectFit: "contain",
|
||||
border: "1px solid #b3b3b3",
|
||||
borderTopRightRadius: "10px",
|
||||
borderTopLeftRadius: "10px",
|
||||
borderBottom: "unset",
|
||||
padding: "5px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundSize: "contain",
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "center",
|
||||
backgroundImage: `url(${selectedImage})`,
|
||||
}}
|
||||
></Paper>
|
||||
</Box>
|
||||
) : (
|
||||
fileType &&
|
||||
isDocumentFormat(fileType) && (
|
||||
<Box
|
||||
sx={{
|
||||
height: imageSize[1],
|
||||
display: "flex",
|
||||
border: "1px solid #b3b3b3",
|
||||
borderTopRightRadius: "10px",
|
||||
borderTopLeftRadius: "10px",
|
||||
borderBottom: "unset",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user