feat: "Modalka" drag&drop

src/pages/Questions/UploadImage.tsx

@@ -14,8 +14,10 @@ import * as React from "react";
 
 import UnsplashIcon from "../../assets/icons/Unsplash.svg";
 
+import type { DragEvent } from "react";
+
 interface ModalkaProps {
-  imgHC: (imgInp: HTMLInputElement) => void;
+  imgHC: (imgInp: FileList | null) => void;
 }
 
 const Modalka: React.FC<ModalkaProps> = ({ imgHC }) => {
@@ -29,6 +31,13 @@ const Modalka: React.FC<ModalkaProps> = ({ imgHC }) => {
     setReady(true);
   };
 
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    imgHC(event.dataTransfer.files);
+  };
+
   return (
     <Box
       sx={{
@@ -58,13 +67,17 @@ const Modalka: React.FC<ModalkaProps> = ({ imgHC }) => {
         </Typography>
         <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
           <input
-            onChange={(event) => imgHC(event.target)}
+            onChange={(event) => imgHC(event.target.files)}
             hidden
             accept="image/*"
             multiple
             type="file"
           />
           <Box
+            onDragOver={(event: DragEvent<HTMLDivElement>) =>
+              event.preventDefault()
+            }
+            onDrop={handleDrop}
             ref={dropZone}
             sx={{
               width: "580px",
@@ -149,9 +162,9 @@ export default function UploadImage() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
-  const imgHC = (imgInp: HTMLInputElement) => {
+  const imgHC = (files: FileList | null) => {
-    if (imgInp.files) {
+    if (files) {
-      const fileArray = Array.from(imgInp.files);
+      const fileArray = Array.from(files);
       const [file] = fileArray;
       setImg(URL.createObjectURL(file));
       handleClose();
@@ -159,6 +172,13 @@ export default function UploadImage() {
   };
   const [img, setImg] = React.useState("");
 
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    imgHC(event.dataTransfer.files);
+  };
+
   return (
     <Box sx={{ padding: "20px" }}>
       <Typography
@@ -176,9 +196,14 @@ export default function UploadImage() {
         sx={{ width: "100%", maxWidth: "260px" }}
       >
         {img ? (
-          <img width="400" src={img} />
+          <img
+            src={img}
+            alt="img"
+            style={{ width: "100%", maxWidth: "400px" }}
+          />
         ) : (
           <UploadBox
+            handleDrop={handleDrop}
             sx={{ maxWidth: "260px" }}
             icon={<UploadIcon />}
             text="5 MB максимум"

src/ui_kit/UploadBox.tsx

@@ -1,43 +1,52 @@
-import {Box, IconButton, Typography, useTheme} from "@mui/material";
+import { Box, Typography, useTheme } from "@mui/material";
 import { SxProps, Theme } from "@mui/material/styles";
 
+import type { DragEvent } from "react";
 
 interface Props {
-    sx?: SxProps<Theme>;
+  sx?: SxProps<Theme>;
-    icon: React.ReactNode;
+  icon: React.ReactNode;
-    text?: string;
+  handleDrop?: (event: DragEvent<HTMLDivElement>) => void;
-    ref?: any;
+  text?: string;
+  ref?: any;
 }
 
-export default function UploadBox({ sx, icon, text, ref }: Props) {
+export default function UploadBox({ sx, icon, text, ref, handleDrop }: Props) {
-    const theme = useTheme();
+  const theme = useTheme();
 
-    return (
+  return (
-        <Box
+    <Box
-            ref={ref}
+      onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
-            sx={{
+      onDrop={handleDrop}
-            width: "100%",
+      ref={ref}
-            height: "120px",
+      sx={{
-            position: "relative",
+        width: "100%",
-            display: "flex",
+        height: "120px",
-            justifyContent: "center",
+        position: "relative",
-            alignItems: "center",
+        display: "flex",
-            backgroundColor: theme.palette.background.default,
+        justifyContent: "center",
-            border: `1px solid ${theme.palette.grey2.main}`,
+        alignItems: "center",
-            borderRadius: "8px",
+        backgroundColor: theme.palette.background.default,
-            ...sx,
+        border: `1px solid ${theme.palette.grey2.main}`,
-        }}>
+        borderRadius: "8px",
-                {icon}
+        ...sx,
+      }}
+    >
+      {icon}
 
-            <Typography sx={{
+      <Typography
-                position: "absolute",
+        sx={{
-                right: "10px",
+          position: "absolute",
-                bottom: "10px",
+          right: "10px",
-                color: theme.palette.orange.main,
+          bottom: "10px",
-                fontSize: "16px",
+          color: theme.palette.orange.main,
-                lineHeight: "19px",
+          fontSize: "16px",
-                textDecoration: "underline",
+          lineHeight: "19px",
-            }}>{text}</Typography>
+          textDecoration: "underline",
-        </Box>
+        }}
-    );
+      >
-}
+        {text}
+      </Typography>
+    </Box>
+  );
+}