93 lines
2.5 KiB
TypeScript
93 lines
2.5 KiB
TypeScript
import {
|
||
Box,
|
||
ButtonBase,
|
||
Typography,
|
||
useMediaQuery,
|
||
useTheme,
|
||
} from "@mui/material";
|
||
import UploadIcon from "@icons/UploadIcon";
|
||
import { type DragEvent, FC, useRef, useState } from "react";
|
||
|
||
type TextFormat = "txt" | "docx";
|
||
|
||
interface CustomFileUploaderProps {
|
||
description?: string;
|
||
accept?: TextFormat[];
|
||
handleImageChange: (file: File) => void;
|
||
}
|
||
|
||
export const CustomFileUploader: FC<CustomFileUploaderProps> = ({
|
||
accept,
|
||
description,
|
||
handleImageChange,
|
||
}) => {
|
||
const theme = useTheme();
|
||
const dropZone = useRef<HTMLDivElement>(null);
|
||
const [ready, setReady] = useState(false);
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
|
||
const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
setReady(true);
|
||
};
|
||
|
||
const handleDrop = (event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const file = event.dataTransfer.files[0];
|
||
if (!file) return;
|
||
|
||
handleImageChange(file);
|
||
};
|
||
|
||
const acceptedFormats = accept
|
||
? accept.map((format) => "." + format).join(", ")
|
||
: "";
|
||
|
||
return (
|
||
<ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
|
||
<input
|
||
onChange={(event) => {
|
||
const file = event.target.files?.[0];
|
||
if (file) handleImageChange(file);
|
||
}}
|
||
hidden
|
||
accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"}
|
||
multiple
|
||
type="file"
|
||
data-cy="upload-image-input"
|
||
/>
|
||
<Box
|
||
onDragOver={(event: DragEvent<HTMLDivElement>) =>
|
||
event.preventDefault()
|
||
}
|
||
onDrop={handleDrop}
|
||
ref={dropZone}
|
||
sx={{
|
||
width: "580px",
|
||
padding: isMobile ? "33px" : "33px 10px 33px 55px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
backgroundColor: theme.palette.background.default,
|
||
border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
|
||
borderRadius: "8px",
|
||
gap: "55px",
|
||
flexDirection: isMobile ? "column" : undefined,
|
||
}}
|
||
onDragEnter={handleDragEnter}
|
||
>
|
||
<UploadIcon />
|
||
<Box>
|
||
<Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
|
||
Добавить файл
|
||
</Typography>
|
||
<Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
|
||
{description || "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
</ButtonBase>
|
||
);
|
||
};
|