frontPanel/src/pages/Questions/UploadImage.tsx

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

const Modalka = ({imgHC}:any) => {
    const theme = useTheme();

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

    const dragenterHC = () => {
        console.log("a")
        setReady(true)
    }

    console.log(dropZone.current)
    React.useEffect(() => {
        console.log(dropZone.current)
        if (dropZone.current) {
            dropZone.current.addEventListener("dragenter", dragenterHC)
        }
        return () => {dropZone.current.removeEventListener("dragenter", dragenterHC)}
    },)
    return (
            <Box
                sx={{
                    position: 'absolute' as '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",
                            }}

                        >
                            <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:any) => {
        const [file] = imgInp.files
        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 handleClose={handleClose} open={open} imgHC={imgHC}/>
            </Modal>
        </Box>
    )
}