ui/component/fileDrop/view.jsx

@@ -12,32 +12,41 @@ type Props = {
 
 function FileDrop(props: Props) {
   const { drag, dropData } = useDragDrop();
+  const [show, setShow] = React.useState(false);
   const [files, setFiles] = React.useState([]);
   const [error, setError] = React.useState(false);
-  const [loading, setLoading] = React.useState(false);
-
-  const showDropArea = drag || (files && files.length > 0 && loading && !error);
 
   React.useEffect(() => {
     // Handle drop...
-    if (dropData && !loading) {
-      setLoading(true);
+    if (dropData) {
       getTree(dropData)
         .then(entries => {
-          setLoading(false);
           setFiles(entries);
         })
         .catch(error => {
           // Invalid entry / entries
-          setError(true);
-          setLoading(false);
+          setError(error || true);
         });
     }
-  }, [dropData, loading]);
+  }, [dropData]);
+
+  React.useEffect(() => {
+    //  Files are drag over or already dropped
+    if (drag || files.length) {
+      setShow(true);
+      // No drag over or files dropped
+    } else if (!drag && !files.length) {
+      setShow(false);
+    }
+    // Handle files
+  }, [drag, files, error]);
 
   return (
-    <div className={classnames('file-drop', showDropArea && 'file-drop--show')}>
-      <p>Drop your files</p>
+    <div className={classnames('file-drop', show && 'file-drop--show')}>
+      <p>Drop your files here!</p>
+      {files.map(file => (
+        <div key={file.path}>{file.path}</div>
+      ))}
     </div>
   );
 }

ui/util/web-file-system.js

@@ -1,5 +1,5 @@
 // Some functions to work with the new html5 file system API:
-// - Used for the fileDrop component
+import path from 'path';
 
 // Wrapper for webkitGetAsEntry
 // Note: webkitGetAsEntry might be renamed to GetAsEntry
@@ -66,18 +66,17 @@ export const getTree = async dataTransfer => {
   if (dataTransfer) {
     const { items, files } = dataTransfer;
     // Handle single item drop
-    if (items.length === 1) {
-      const { path } = files[0];
+    if (files.length === 1) {
       const entry = getAsEntry(items[0]);
       // Handle entry
       if (entry) {
-        const root = { entry, path };
+        const root = { entry, path: files[0].path };
         // Handle directory
         if (root.entry.isDirectory) {
           const directoryEntries = await readDirectory(root.entry);
           directoryEntries.forEach(item => {
             if (item.isFile) {
-              tree.push({ entry: item, path: `root.path/${item.name}` });
+              tree.push({ entry: item, path: path.join(root.path, item.name) });
             }
           });
         }
@@ -88,7 +87,7 @@ export const getTree = async dataTransfer => {
       }
     }
     // Handle multiple items drop
-    if (items.length > 1) {
+    if (files.length > 1) {
       tree = tree.concat(getFiles(dataTransfer));
     }
   }