diff --git a/ui/component/fileDrop/view.jsx b/ui/component/fileDrop/view.jsx index 8cde77285..c10292324 100644 --- a/ui/component/fileDrop/view.jsx +++ b/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> ); } diff --git a/ui/util/web-file-system.js b/ui/util/web-file-system.js index d2418c234..12e87ee96 100644 --- a/ui/util/web-file-system.js +++ b/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)); } }