Show a cue for drop

src/App.css

@@ -11,5 +11,5 @@ body {
   height: -webkit-fill-available;
 }
 #root {
-  height: 100%;
+  height: 100vh;
 }

src/common/FileDropTarget.tsx

@@ -1,5 +1,6 @@
-import { Box, BoxProps } from "@chakra-ui/layout";
-import { ReactNode, useCallback } from "react";
+import { Box, BoxProps, Center } from "@chakra-ui/layout";
+import { ReactNode, useCallback, useState } from "react";
+import { RiFolderOpenLine } from "react-icons/ri";
 
 interface FileDropTargetProps extends BoxProps {
   children: ReactNode;
@@ -11,8 +12,11 @@ const FileDropTarget = ({
   onFileDrop,
   ...props
 }: FileDropTargetProps) => {
+  const [dragOver, setDragOver] = useState(false);
+
   const handleDrop = useCallback(
     (event: React.DragEvent<HTMLElement>) => {
+      setDragOver(false);
       const file = event.dataTransfer.files[0];
       if (file) {
         event.preventDefault();
@@ -24,10 +28,45 @@ const FileDropTarget = ({
   );
   const handleDragOver = useCallback((event: React.DragEvent<HTMLElement>) => {
     event.preventDefault();
+    setDragOver(true);
     event.dataTransfer.dropEffect = "copy";
   }, []);
+  const handleDragLeave = useCallback((event: React.DragEvent<HTMLElement>) => {
+    setDragOver(false);
+  }, []);
   return (
-    <Box {...props} onDrop={handleDrop} onDragOver={handleDragOver}>
+    <Box
+      {...props}
+      onDragOver={handleDragOver}
+      position="relative"
+      height="100%"
+    >
+      {dragOver && (
+        <Center
+          data-testid={
+            (props as any)["data-testid"]
+              ? (props as any)["data-testid"] + "-overlay"
+              : undefined
+          }
+          onDrop={handleDrop}
+          onDragLeave={handleDragLeave}
+          position="absolute"
+          top={0}
+          left={0}
+          height="100%"
+          width="100%"
+          // If it's not on top then we'll get unexpected leave events.
+          zIndex={999999}
+          backgroundColor="blackAlpha.500"
+        >
+          <RiFolderOpenLine
+            size="25%"
+            pointerEvents="none"
+            aria-label="Open file when dropped"
+            aria-live="assertive"
+          />
+        </Center>
+      )}
       {children}
     </Box>
   );

src/e2e/app.ts

@@ -51,6 +51,8 @@ export class App {
     const page = await this.page;
     // Puppeteer doesn't have file drio support but we can use an input
     // to grab a file and trigger an event that's good enough.
+    // It's a bit of a pain as the drop happens on an element created by
+    // the drag-over.
     // https://github.com/puppeteer/puppeteer/issues/1376
     const inputId = "simulated-drop-input";
     await page.evaluate((inputId) => {
@@ -59,17 +61,27 @@ export class App {
       input.type = "file";
       input.id = inputId;
       input.onchange = (e: any) => {
-        const dropZone = document.querySelector(
+        const dragOverZone = document.querySelector(
           "[data-testid=project-drop-target]"
         );
-        if (!dropZone) {
+        if (!dragOverZone) {
           throw new Error();
         }
+        const dragOverEvent = new Event("dragover", {
+          bubbles: true,
+        });
         const dropEvent = new Event("drop", {
           bubbles: true,
         });
+        (dragOverEvent as any).dataTransfer = { files: e.target.files };
         (dropEvent as any).dataTransfer = { files: e.target.files };
-        dropZone.dispatchEvent(dropEvent);
+        dragOverZone.dispatchEvent(dragOverEvent);
+
+        const dropZone = document.querySelector(
+          "[data-testid=project-drop-target-overlay]"
+        );
+        dropZone!.dispatchEvent(dropEvent);
+
         input.remove();
       };
       document.body.appendChild(input);