diff --git a/src/pages/Questions/helpQuestions.tsx b/src/pages/Questions/helpQuestions.tsx index 2ea766fa..e40bacc4 100644 --- a/src/pages/Questions/helpQuestions.tsx +++ b/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 handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); + const [open, setOpen] = useState(false); + const [video, setVideo] = useState(""); const [backgroundType, setBackgroundType] = useState("text"); const [backgroundTypeModal, setBackgroundTypeModal] = useState("linkVideo"); const theme = useTheme(); - const videoHC = (videoInp: HTMLInputElement) => { - const fileList = videoInp.files; - if (fileList !== null) { + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + 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) => { + event.preventDefault(); + event.stopPropagation(); + + videoHC(event.dataTransfer.files); + }; return ( videoHC(event.target)} + onChange={(event) => videoHC(event.target.files)} hidden accept="video/*" multiple type="file" /> ) => + event.preventDefault() + } + onDrop={handleDrop} sx={{ width: "580px", padding: "33px 33px 33px 50px",