feat: drag&drop video

src/pages/Questions/helpQuestions.tsx

@@ -13,27 +13,36 @@ import { useState } from "react";
 import UploadIcon from "../../assets/icons/UploadIcon";
 import UploadBox from "@ui_kit/UploadBox";
 
+import type { DragEvent } from "react";
+
 type BackgroundType = "text" | "video";
 type BackgroundTypeModal = "linkVideo" | "ownVideo";
 
 export default function HelpQuestions() {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
-  const handleOpen = () => setOpen(true);
+  const [video, setVideo] = useState("");
-  const handleClose = () => setOpen(false);
   const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
   const [backgroundTypeModal, setBackgroundTypeModal] =
     useState<BackgroundTypeModal>("linkVideo");
   const theme = useTheme();
 
-  const videoHC = (videoInp: HTMLInputElement) => {
+  const handleOpen = () => setOpen(true);
-    const fileList = videoInp.files;
+  const handleClose = () => setOpen(false);
-    if (fileList !== null) {
+
+  const videoHC = (fileList: FileList | null) => {
+    if (fileList?.length) {
       const file = fileList[0];
       setVideo(URL.createObjectURL(file));
       handleClose();
     }
   };
-  const [video, setVideo] = React.useState("");
+
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    videoHC(event.dataTransfer.files);
+  };
 
   return (
     <Box
@@ -161,13 +170,17 @@ export default function HelpQuestions() {
                     sx={{ justifyContent: "flex-start", width: "100%" }}
                   >
                     <input
-                      onChange={(event) => videoHC(event.target)}
+                      onChange={(event) => videoHC(event.target.files)}
                       hidden
                       accept="video/*"
                       multiple
                       type="file"
                     />
                     <Box
+                      onDragOver={(event: DragEvent<HTMLDivElement>) =>
+                        event.preventDefault()
+                      }
+                      onDrop={handleDrop}
                       sx={{
                         width: "580px",
                         padding: "33px 33px 33px 50px",