компонент дроп зоны на react слушателях

src/pages/startPage/StartPageSettings.tsx

@@ -29,6 +29,7 @@ import {quizStore} from "@root/quizes";
 import {useParams} from "react-router-dom";
 import * as React from "react";
 import ModalSizeImage from "./ModalSizeImage";
+import DropZone from "./dropZone";
 
 
 const designTypes = [
@@ -245,6 +246,7 @@ export default function StartPageSettings() {
 
     return (
         <>
+        <DropZone/>
             <Typography variant="h5" sx={{marginTop: "60px"}}>Стартовая страница</Typography>
             <Box sx={{
                 backgroundColor: "white",

src/pages/startPage/dropZone.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { Box, ButtonBase, useTheme,Typography } from "@mui/material";
+import UploadIcon from "../../assets/icons/UploadIcon";
+
+//Научи функцию принимать данные для валидации
+export default () => {
+    const theme = useTheme();
+
+    const [data, setData] = useState("")
+    const [ready, setReady] = useState(false);
+
+    const dragenterHC = () => {
+        // console.log("onDragEnter")
+        setReady(true)
+    }
+
+    const dragexitHC = () => {
+        // console.log("onDragExit")
+        setReady(false)
+    }
+
+    const dropHC = (event: any) => {
+        event.preventDefault()
+        // console.log("onDrop")
+        setReady(false)
+
+        const file = event.dataTransfer.files[0]
+        console.log(event.dataTransfer.files[0])
+        setData(URL.createObjectURL(file))
+    }
+
+    const dragOverHC = (event: any) => {
+        event.preventDefault()
+        // console.log("onDragOver")
+    }
+
+    return (
+        <ButtonBase component="label" sx={{justifyContent: 'flex-start'}} >
+            <input hidden accept="image/*" multiple type="file" />
+            <Box
+
+                onDragEnter={dragenterHC}
+                onDragExit={dragexitHC}
+                onDrop={dropHC}
+                onDragOver={dragOverHC}
+
+                sx={{
+                    width: "120px",
+                    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
+                }}
+
+            >
+                <UploadIcon />
+                <Typography sx={{
+                    position: "absolute",
+                    right: "10px",
+                    bottom: "10px",
+                    color: theme.palette.orange.main,
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    textDecoration: "underline",
+                }}>5 MB максимум</Typography>
+                {data ?
+                    <img height="110" src={data}
+                            style={{
+                                position: "absolute", zIndex: "-1",
+                        objectFit: "revert-layer",
+                    }}/>
+                    :
+                    null
+                }
+            </Box>
+        </ButtonBase>
+    )
+}