file uploading template

src/components/editors/ImageEditor/index.tsx

@@ -5,14 +5,32 @@ import * as styles from './styles.scss';
 interface IProps {
   data: INode,
   setData: (val: INode) => void;
-};
+  onUpload: (val: File[]) => void;
+}
 
 const ImageEditor: FC<IProps> = ({
   data,
   setData,
+  onUpload,
 }) => {
   const eventPreventer = useCallback(event => event.preventDefault(), []);
 
+  const onDrop = useCallback(event => {
+    event.preventDefault();
+
+    if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length) return;
+
+    onUpload(event.dataTransfer.files);
+  }, [onUpload]);
+
+  const onInputChange = useCallback(event => {
+    event.preventDefault();
+
+    if (!event.target.files || !event.target.files.length) return;
+
+    onUpload(event.target.files);
+  }, [onUpload]);
+
   useEffect(() => {
     window.addEventListener("dragover", eventPreventer,false);
     window.addEventListener("drop",eventPreventer,false);
@@ -26,9 +44,10 @@ const ImageEditor: FC<IProps> = ({
   return (
     <form
       className={styles.uploads}
-      onDrop={e => { console.log(e.dataTransfer.files);}}
+      onDrop={onDrop}
     >
       <div>{data.type}</div>
+      <input type="file" onChange={onInputChange} />
     </form>
   );
 };