frontPanel/src/pages/startPage/dropZone.tsx

import { useState } from "react";
import { Box, ButtonBase, useTheme, Typography, SxProps, Theme } from "@mui/material";
import UploadIcon from "../../assets/icons/UploadIcon";
import { SnackbarProvider, enqueueSnackbar } from "notistack";

interface Props {
  text?: string;
  sx?: SxProps<Theme>;
  heightImg: string;
  widthImg?: string;
}

//Научи функцию принимать данные для валидации
export default ({ text, sx, heightImg, widthImg }: Props) => {
  const theme = useTheme();

  const imgHC = (imgInp: HTMLInputElement) => {
    const file = imgInp.files?.[0];
    if (file) {
      if (file.size < 5242880) {
        setData(URL.createObjectURL(file));
      } else {
        enqueueSnackbar("Размер картинки слишком велик");
      }
    }
  };
  const [data, setData] = useState("");
  const [ready, setReady] = useState(false);

  const dragenterHC = () => {
    setReady(true);
  };

  const dragexitHC = () => {
    setReady(false);
  };

  const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setReady(false);

    const file = event.dataTransfer.files[0];
    if (file.size < 5242880) {
      setData(URL.createObjectURL(file));
    } else {
      enqueueSnackbar("Размер картинки слишком велик");
    }
  };

  const dragOverHC = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

  return (
    <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
      <input onChange={(event) => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
      <Box
        onDragEnter={dragenterHC}
        onDragExit={dragexitHC}
        onDrop={dropHC}
        onDragOver={dragOverHC}
        sx={{
          width: "100%",
          height: "120px",
          position: "relative",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: theme.palette.background.default,
          border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
          borderRadius: "8px",
          opacity: data ? "0.5" : 1,
          ...sx,
        }}
      >
        <UploadIcon />
        <Typography
          sx={{
            position: "absolute",
            right: "10px",
            bottom: "10px",
            color: theme.palette.orange.main,
            fontSize: "16px",
            lineHeight: "19px",
            textDecoration: "underline",
          }}
        >
          {text}
        </Typography>
        <SnackbarProvider style={{ backgroundColor: theme.palette.brightPurple.main }} />
        {data ? (
          <img
            height={heightImg}
            width={widthImg}
            src={data}
            style={{
              position: "absolute",
              zIndex: "-1",
              objectFit: "revert-layer",
            }}
          />
        ) : null}
      </Box>
    </ButtonBase>
  );
};