fix dropzone file drag

src/pages/startPage/dropZone.tsx

@@ -10,13 +10,15 @@ import {
     useTheme,
 } from "@mui/material";
 import { useCurrentQuiz } from "@root/quizes/hooks";
-import { enqueueSnackbar } from "notistack";
-import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
-import { useEffect, useState } from "react";
 import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
+import { enqueueSnackbar } from "notistack";
+import { useState } from "react";
+import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
 import { useDisclosure } from "../../utils/useDisclosure";
 
 
+const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
 interface Props {
     text?: string;
     sx?: SxProps<Theme>;
@@ -33,6 +35,7 @@ interface Props {
 export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImageUrl, onImageUploadClick, onImageSaveClick, onDeleteClick }: Props) => {
     const theme = useTheme();
     const quiz = useCurrentQuiz();
+    const [isDropReady, setIsDropReady] = useState<boolean>(false);
     const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();
     const {
         isCropModalOpen,
@@ -45,21 +48,39 @@ export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImag
     if (!quiz) return null; // TODO throw and catch with error boundary 
 
     async function handleImageUpload(file: File) {
+        if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
+        if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");
+
         onImageUploadClick?.(file);
         closeImageUploadModal();
         openCropModal(file);
     }
 
+    const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
+        event.preventDefault();
+        setIsDropReady(false);
+
+        const file = event.dataTransfer.files[0];
+        if (!file || imageUrl) return;
+
+        handleImageUpload(file);
+    };
+
     return (
-        <Box sx={{
+        <Box
-            position: "relative",
+            onDragEnter={() => !imageUrl && setIsDropReady(true)}
-            width: "100%",
+            onDragExit={() => setIsDropReady(false)}
-            height: "120px",
+            onDragOver={e => e.preventDefault()}
-            backgroundColor: theme.palette.background.default,
+            onDrop={onDrop}
-            border: `1px solid ${theme.palette.grey2.main}`,
+            sx={{
-            borderRadius: "8px",
+                position: "relative",
-            ...sx,
+                width: "100%",
-        }}>
+                height: "120px",
+                backgroundColor: theme.palette.background.default,
+                border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
+                borderRadius: "8px",
+                ...sx,
+            }}>
             <UploadImageModal
                 isOpen={isImageUploadOpen}
                 onClose={closeImageUploadModal}