Merge pull request #575 from vizhub-core/drag-drop

drag and drop v1

src/client/VZCodeContext.tsx

@@ -52,7 +52,7 @@ export type VZCodeContextValue = {
   docPresence: any;
 
   files: Files | null;
-  createFile: (fileName: string) => void;
+  createFile: (fileName: string, text?: string) => void;
   renameFile: (fileId: string, fileName: string) => void;
   deleteFile: (fileId: string) => void;
   renameDirectory: (

src/client/VZSidebar/DragAndDrop.tsx

@@ -0,0 +1,74 @@
+import { useState, useContext, useCallback } from 'react';
+import { VZCodeContext } from '../VZCodeContext';
+import './styles.scss';
+
+const debug = false;
+
+export const DragAndDrop = () => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const { createFile } = useContext(VZCodeContext);
+
+  const handleDragEnter = useCallback((event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragOver = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!isDragOver) setIsDragOver(true);
+    },
+    [isDragOver],
+  );
+
+  const handleDragLeave = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragOver(false);
+    },
+    [],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragOver(false);
+      const files = event.dataTransfer.files;
+
+      if (debug) {
+        console.log(files);
+      }
+
+      Array.from(files).forEach((file) => {
+        const reader = new FileReader();
+        reader.onload = (readEvent) => {
+          createFile(
+            file.name,
+            readEvent.target.result as string,
+          );
+        };
+        reader.onerror = (error) => {
+          console.error('Error reading file:', error);
+        };
+        reader.readAsText(file);
+      });
+    },
+    [createFile],
+  );
+
+  return (
+    <div
+      className={`drop-zone ${isDragOver ? 'dragover' : ''}`}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      Drag files here
+    </div>
+  );
+};

src/client/VZSidebar/index.tsx

@@ -17,6 +17,7 @@ import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { BugSVG, GearSVG, NewSVG } from '../Icons';
 import { Listing } from './Listing';
 import { VZCodeContext } from '../VZCodeContext';
+import { DragAndDrop } from './DragAndDrop';
 import './styles.scss';
 
 // TODO turn this UI back on when we are actually detecting
@@ -146,6 +147,7 @@ export const VZSidebar = ({
             </OverlayTrigger>
           </div>
         </div>
+        <DragAndDrop />
         {filesExist ? (
           fileTree.children.map((entity) => {
             const { fileId } = entity as FileTreeFile;

src/client/VZSidebar/styles.scss

@@ -147,4 +147,18 @@
       }
     }
   }
+
+  .drop-zone {
+    border: 3px dashed #bdc7dc;
+    width: auto;
+    padding: 20px;
+    color: #bdc7dc;
+    text-align: center;
+    font-family: var(--vzcode-font-family);
+    font-weight: 500;
+  }
+
+  .drop-zone.dragover {
+    border-color: #009639;
+  }
 }

src/client/useFileCRUD.ts

@@ -27,14 +27,14 @@ export const useFileCRUD = ({
 }) => {
   // Create a new file
   const createFile = useCallback(
-    (name: string) => {
+    (name: string, text = '') => {
       if (name) {
         const fileId: FileId = randomId();
         submitOperation((document: VZCodeContent) => ({
           ...document,
           files: {
             ...document.files,
-            [fileId]: { name, text: '' },
+            [fileId]: { name, text },
           },
         }));
         // When a new file is created, open it in a new tab