95 lines
3.6 KiB
JavaScript
95 lines
3.6 KiB
JavaScript
import { Box, Button, Paper, Typography } from "@mui/material";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
|
|
import { useRef } from "react";
|
|
|
|
const UploadSystem = ({ selectedImage, handleUploadChange, imageSize, fileType, showAddIcon }) => {
|
|
const fileInputRef = useRef(null);
|
|
|
|
const handleClick = () => {
|
|
fileInputRef.current.click();
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ width: "100%", my: 1 }}>
|
|
{showAddIcon ? (
|
|
<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: "0.8rem",
|
|
color: "#a19d9d",
|
|
mt: 1,
|
|
}}
|
|
textAlign="center"
|
|
>
|
|
فرمت قابل قبول : png, jpg
|
|
<br />
|
|
حداکثر 3Mb
|
|
</Typography>
|
|
</Box>
|
|
) : (
|
|
<>
|
|
{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",
|
|
borderRadius: "10px",
|
|
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})`,
|
|
}}
|
|
/>
|
|
</Box>
|
|
)}
|
|
</>
|
|
)}
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
style={{ display: "none" }}
|
|
onChange={handleUploadChange}
|
|
ref={fileInputRef}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
export default UploadSystem;
|