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,19 +1,23 @@
-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>;
   icon: React.ReactNode;
+  handleDrop?: (event: DragEvent<HTMLDivElement>) => void;
   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();
 
   return (
     <Box
+      onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
+      onDrop={handleDrop}
       ref={ref}
       sx={{
         width: "100%",
@@ -26,10 +30,12 @@ export default function UploadBox({ sx, icon, text, ref }: Props) {
         border: `1px solid ${theme.palette.grey2.main}`,
         borderRadius: "8px",
         ...sx,
-        }}>
+      }}
+    >
       {icon}
 
-            <Typography sx={{
+      <Typography
+        sx={{
           position: "absolute",
           right: "10px",
           bottom: "10px",
@@ -37,7 +43,10 @@ export default function UploadBox({ sx, icon, text, ref }: Props) {
           fontSize: "16px",
           lineHeight: "19px",
           textDecoration: "underline",
-            }}>{text}</Typography>
+        }}
+      >
+        {text}
+      </Typography>
     </Box>
   );
 }