frontPanel/src/pages/Questions/UploadImage.tsx

import { Typography, Box, useTheme, ButtonBase, Modal } from "@mui/material";
import UploadBox from "@ui_kit/UploadBox";
import UploadIcon from "../../assets/icons/UploadIcon";
import * as React from "react";

interface ModalkaProps {
  imgHC: (imgInp: HTMLInputElement) => void;
}

const Modalka: React.FC<ModalkaProps> = ({ imgHC }) => {
  const theme = useTheme();

  const dropZone = React.useRef<HTMLDivElement>(null);
  const [ready, setReady] = React.useState(false);

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

  return (
    <Box
      sx={{
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        maxWidth: "690px",
        bgcolor: "background.paper",
        borderRadius: "12px",
        boxShadow: 24,
        p: 0,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          padding: "20px",
          background: theme.palette.background.default,
        }}
      >
        <Typography>Добавьте изображение</Typography>
        <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
          <input onChange={(event) => imgHC(event.target)} hidden accept="image/*" multiple type="file" />
          <Box
            ref={dropZone}
            sx={{
              width: "580px",
              padding: "33px",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              backgroundColor: theme.palette.background.default,
              border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
              borderRadius: "8px",
            }}
            onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
          >
            <UploadIcon />
            <Box>
              <Typography>Загрузите или перетяните сюда файл</Typography>
              <Typography>Принимает JPG, PNG, и GIF формат — максимум 5mb</Typography>
            </Box>
          </Box>
        </ButtonBase>
        <Typography>Или выберите на фотостоке</Typography>
      </Box>
    </Box>
  );
};

export default function UploadImage() {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  const imgHC = (imgInp: HTMLInputElement) => {
    if (imgInp.files) {
      const fileArray = Array.from(imgInp.files);
      const [file] = fileArray;
      setImg(URL.createObjectURL(file));
      handleClose();
    }
  };
  const [img, setImg] = React.useState("");

  return (
    <Box sx={{ padding: "20px" }}>
      <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
        Загрузить изображение
      </Typography>
      <ButtonBase onClick={handleOpen} sx={{ width: "100%", maxWidth: "260px" }}>
        {img ? (
          <img width="400" src={img} />
        ) : (
          <UploadBox sx={{ maxWidth: "260px" }} icon={<UploadIcon />} text="5 MB максимум" />
        )}
      </ButtonBase>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Modalka imgHC={imgHC} />
      </Modal>
    </Box>
  );
}