дроп. ловим файл

src/pages/startPage/StartPageSettings.tsx

@@ -66,19 +66,35 @@ export default function StartPageSettings() {
         setReady(true)
     }
 
-    React.useEffect(() => {
+    const dragexitHC = () => {
-
+        setReady(false)
-        if (dropZone.current) {
-            dropZone.current.addEventListener("dragenter", dragenterHC)
-            console.log(dropZone.current)
     }
-        return () => {dropZone.current.removeEventListener("dragenter", dragenterHC)}
+
+    const ondropHC = (event: any) => {
+        event.preventDefault()
+        const file = event.dataTransfer.files[0]
+        console.log(event.dataTransfer.files[0])
+        setImg(URL.createObjectURL(file))
+        setReady(false)
+    }
+
+    const ondragOverHC = (event: any) => {
+        event.preventDefault()
+        console.log(event)
+    }
+
+    React.useEffect(() => {
+            dropZone.current.addEventListener("dragenter", dragenterHC)
+            dropZone.current.addEventListener("dragexit", dragexitHC)
+            dropZone.current.addEventListener("dragover", ondragOverHC)
+            dropZone.current.addEventListener("drop", ondropHC)
+            console.log(dropZone.current)
     },)
 
     //для Логотипа
     const logoHC = (imgInp:any) => {
-        const [file] = imgInp.files
+        const [fileL] = imgInp.files
-        setLogo(URL.createObjectURL(file))
+        setLogo(URL.createObjectURL(fileL))
     }
     const [logo, setLogo] = React.useState("");
 
@@ -90,13 +106,30 @@ export default function StartPageSettings() {
         setReadyLogo(true)
     }
 
-    React.useEffect(() => {
+    const dragexitLogoHC = () => {
-
+        setReadyLogo(false)
-        if (dropZoneLogo.current) {
-            dropZoneLogo.current.addEventListener("dragenter", dragenterLogoHC)
-            console.log(dropZoneLogo.current)
     }
-        return () => {dropZoneLogo.current.removeEventListener("dragenter", dragenterLogoHC)}
+
+    const ondropLogoHC = (event: any) => {
+        event.preventDefault()
+        const fileL = event.dataTransfer.files[0]
+        console.log(event.dataTransfer.files[0])
+        setLogo(URL.createObjectURL(fileL))
+        setReadyLogo(false)
+    }
+
+    const ondragOverLogoHC = (event: any) => {
+        event.preventDefault()
+        console.log(event)
+    }
+
+    React.useEffect(() => {
+            dropZoneLogo.current.addEventListener("dragenter", dragenterLogoHC)
+            dropZoneLogo.current.addEventListener("dragexit", dragexitLogoHC)
+            dropZone.current.addEventListener("dragover", ondragOverLogoHC)
+            dropZone.current.addEventListener("drop", ondropLogoHC)
+            console.log(dropZoneLogo.current)
+
     },)
 
     // для фавиконки
@@ -114,13 +147,20 @@ export default function StartPageSettings() {
         setReadyFav(true)
     }
 
+    const dragexitFavHC = () => {
+        setReadyFav(false)
+    }
+
     React.useEffect(() => {
 
-        if (dropZoneFav.current) {
+        // if (dropZoneFav.current) {
             dropZoneFav.current.addEventListener("dragenter", dragenterFavHC)
+            dropZoneFav.current.addEventListener("dragexit", dragexitFavHC)
             console.log(dropZoneFav.current)
-        }
+        // }
-        return () => {dropZoneFav.current.removeEventListener("dragenter", dragenterFavHC)}
+        // return () => {dropZoneFav.current.removeEventListener("dragenter", dragenterFavHC)
+        //     dropZoneFav.current.removeEventListener("dragexit", dragenterFavHC)
+        // }
     },)
 
     //изображение для мобильной версии
@@ -138,13 +178,20 @@ export default function StartPageSettings() {
         setReadyMobile(true)
     }
 
+    const dragexitMobileHC = () => {
+        setReadyMobile(false)
+    }
+
     React.useEffect(() => {
 
-        if (dropZoneMobile.current) {
+        // if (dropZoneMobile.current) {
             dropZoneMobile.current.addEventListener("dragenter", dragenterMobileHC)
+            dropZoneMobile.current.addEventListener("dragexit", dragexitMobileHC)
             console.log(dropZoneMobile.current)
-        }
+        // }
-        return () => {dropZoneMobile.current.removeEventListener("dragenter", dragenterMobileHC)}
+        // return () => {dropZoneMobile.current.removeEventListener("dragenter", dragenterMobileHC)
+        //     dropZoneMobile.current.removeEventListener("dragexit", dragexitMobileHC)
+        // }
     },)
 
     // для видео