drag-and-drop on form

src/components/editors/ImageEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, {FC, useCallback, useEffect} from 'react';
 import { INode } from '~/redux/types';
 import * as styles from './styles.scss';
 
@@ -8,10 +8,26 @@ interface IProps {
 };
 
 const ImageEditor: FC<IProps> = ({
-}) => (
-    <div className={styles.uploads}>
-      <div />
-    </div>
-  )
+  data,
+  setData,
+}) => {
+  const eventPreventer = useCallback(event => event.preventDefault(), []);
 
-export { ImageEditor };
+  useEffect(() => {
+    window.addEventListener("dragover", eventPreventer,false);
+    window.addEventListener("drop",eventPreventer,false);
+
+    return () => {
+      window.removeEventListener("dragover", eventPreventer,false);
+      window.removeEventListener("drop",eventPreventer,false);
+    }
+  }, [eventPreventer]);
+
+  return (
+    <form className={styles.uploads} onDrop={e => { console.log(e.dataTransfer.files);}}>
+      <div>{data.type}</div>
+    </form>
+  );
+};
+
+export { ImageEditor };

src/components/editors/ImageEditor/styles.scss

@@ -11,4 +11,4 @@
   @media (max-width: 600px) {
     grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
   }
-}
+}