upload proof of concept

packages/web/src/Screen.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import theme from './theme';
 import styled from 'styled-components';
+import { useDropzone } from 'react-dropzone';
 import TabsPanel from './TabsPanel';
 import TabContent from './TabContent';
 import WidgetIconPanel from './widgets/WidgetIconPanel';
@@ -12,6 +13,7 @@ import ToolBar from './widgets/Toolbar';
 import StatusBar from './widgets/StatusBar';
 import { useSplitterDrag, HorizontalSplitHandle } from './widgets/Splitter';
 import { ModalLayer } from './modals/showModal';
+import resolveApi from './utility/resolveApi';
 
 const BodyDiv = styled.div`
   position: fixed;
@@ -96,6 +98,15 @@ const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`
   bottom: ${theme.statusBar.height}px;
 `;
 
+const DragAndDropTarget = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: red;
+`;
+
 export default function Screen() {
   const currentWidget = useCurrentWidget();
   const leftPanelWidth = useLeftPanelWidth();
@@ -105,8 +116,46 @@ export default function Screen() {
     : theme.widgetMenu.iconSize;
   const toolbarPortalRef = React.useRef();
   const onSplitDown = useSplitterDrag('clientX', (diff) => setLeftPanelWidth((v) => v + diff));
+
+  const onDrop = React.useCallback((files) => {
+    // Do something with the files
+    console.log('FILES', files);
+    files.forEach(async (file) => {
+      if (parseInt(file.size, 10) >= 4 * 1024 * 1024) {
+        // to big file
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append('data', file);
+
+      const fetchOptions = {
+        method: 'POST',
+        body: formData,
+      };
+
+      const apiBase = resolveApi();
+      const resp = await fetch(`${apiBase}/uploads/upload`, fetchOptions);
+      const event = await resp.json();
+
+      return event;
+
+      // const reader = new FileReader();
+
+      // reader.onabort = () => console.log('file reading was aborted');
+      // reader.onerror = () => console.log('file reading has failed');
+      // reader.onload = () => {
+      //   // Do whatever you want with the file contents
+      //   const binaryStr = reader.result;
+      //   console.log(binaryStr);
+      // };
+      // reader.readAsArrayBuffer(file);
+    });
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
   return (
-    <>
+    <div {...getRootProps()}>
       <ToolBarDiv>
         <ToolBar toolbarPortalRef={toolbarPortalRef} />
       </ToolBarDiv>
@@ -134,6 +183,13 @@ export default function Screen() {
         <StatusBar />
       </StausBarContainer>
       <ModalLayer />
-    </>
+
+      {!!isDragActive && (
+        <DragAndDropTarget>
+          Drop the files here ...
+          <input {...getInputProps()} />{' '}
+        </DragAndDropTarget>
+      )}
+    </div>
   );
 }