ui/component/app/view.jsx

@@ -16,6 +16,7 @@ import usePrevious from 'effects/use-previous';
 import Nag from 'component/common/nag';
 import { rewards as REWARDS } from 'lbryinc';
 import usePersistedState from 'effects/use-persisted-state';
+import FileDrop from 'component/fileDrop';
 // @if TARGET='web'
 import OpenInAppLink from 'lbrytv/component/openInAppLink';
 import YoutubeWelcome from 'lbrytv/component/youtubeReferralWelcome';
@@ -284,6 +285,7 @@ function App(props: Props) {
         <React.Fragment>
           <Router />
           <ModalRouter />
+          <FileDrop />
           <FileRenderFloating />
           {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
 

ui/component/fileDrop/index.js

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import {
+  selectBalance,
+  selectIsStillEditing,
+  makeSelectPublishFormValue,
+  doUpdatePublishForm,
+  doToast,
+  doClearPublish,
+} from 'lbry-redux';
+import { selectFfmpegStatus } from 'redux/selectors/settings';
+import FileDrop from './view';
+
+const select = state => ({
+  name: makeSelectPublishFormValue('name')(state),
+  filePath: makeSelectPublishFormValue('filePath')(state),
+  optimize: makeSelectPublishFormValue('optimize')(state),
+  isStillEditing: selectIsStillEditing(state),
+  balance: selectBalance(state),
+  publishing: makeSelectPublishFormValue('publishing')(state),
+  ffmpegStatus: selectFfmpegStatus(state),
+  size: makeSelectPublishFormValue('fileSize')(state),
+  duration: makeSelectPublishFormValue('fileDur')(state),
+  isVid: makeSelectPublishFormValue('fileVid')(state),
+});
+
+const perform = dispatch => ({
+  clearPublish: () => dispatch(doClearPublish()),
+  updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
+  showToast: message => dispatch(doToast({ message, isError: true })),
+});
+
+export default connect(select, perform)(FileDrop);

ui/component/fileDrop/view.jsx

@@ -0,0 +1,45 @@
+// @flow
+import React from 'react';
+import useDragDrop from 'effects/use-drag-drop';
+import classnames from 'classnames';
+import { getTree } from 'util/web-file-system';
+
+type Props = {
+  filePath: string | WebFile,
+  clearPublish: () => void,
+  updatePublishForm: ({}) => void,
+};
+
+function FileDrop(props: Props) {
+  const { drag, dropData } = useDragDrop();
+  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);
+      getTree(dropData)
+        .then(entries => {
+          setLoading(false);
+          setFiles(entries);
+        })
+        .catch(error => {
+          // Invalid entry / entries
+          setError(true);
+          setLoading(false);
+        });
+    }
+  }, [dropData, loading]);
+
+  return (
+    <div className={classnames('file-drop', showDropArea && 'file-drop--show')}>
+      <p>Drop your files</p>
+    </div>
+  );
+}
+
+export default FileDrop;

ui/effects/use-drag-drop.js

@@ -25,7 +25,7 @@ const DRAG_STATE = {
 // Returns simple detection for global drag-drop
 export default function useFetched() {
   const [drag, setDrag] = React.useState(false);
-  const [drop, setDrop] = React.useState(null);
+  const [dropData, setDropData] = React.useState(null);
 
   React.useEffect(() => {
     let dragCount = 0;
@@ -39,9 +39,9 @@ export default function useFetched() {
         event.preventDefault();
         // Get files
         const files = event.dataTransfer.files;
-        // Store files in state
-        if (files.length && files.length > 0) {
-          setDrop(files);
+        // Check for files
+        if (files.length > 0) {
+          setDropData(event.dataTransfer);
         }
       }
       // Reset state ( hide drop zone )
@@ -93,5 +93,5 @@ export default function useFetched() {
     };
   }, []);
 
-  return { drag, drop };
+  return { drag, dropData };
 }

ui/scss/all.scss

@@ -18,6 +18,7 @@
 @import 'component/embed-player';
 @import 'component/expandable';
 @import 'component/expanding-details';
+@import 'component/file-drop';
 @import 'component/file-properties';
 @import 'component/file-render';
 @import 'component/footer';

ui/scss/component/_file-drop.scss

@@ -0,0 +1,18 @@
+.file-drop {
+  height: 0;
+  width: 0;
+  top: 0;
+  left: 0;
+  position: fixed;
+  z-index: 5;
+  background: var(--color-background-overlay);
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 0.3s ease;
+
+  &.file-drop--show {
+    height: 100%;
+    width: 100%;
+    opacity: 1;
+  }
+}

ui/util/web-file-system.js

@@ -0,0 +1,96 @@
+// Some functions to work with the new html5 file system API:
+// - Used for the fileDrop component
+
+// Wrapper for webkitGetAsEntry
+// Note: webkitGetAsEntry might be renamed to GetAsEntry
+const getAsEntry = item => {
+  if (item.kind === 'file' && item.webkitGetAsEntry) {
+    return item.webkitGetAsEntry();
+  }
+  return null;
+};
+
+// Read entries from directory
+const readDirectory = directory => {
+  let dirReader = directory.createReader();
+
+  return new Promise((resolve, reject) => {
+    dirReader.readEntries(
+      results => {
+        if (results.length) {
+          resolve(results);
+        } else {
+          reject();
+        }
+      },
+      error => reject(error)
+    );
+  });
+};
+
+// Some files hide more that one dataTransferItem:
+// This is a safe way to get the absolute path on electron
+const getFilePath = (name, files) => {
+  let filePath = null;
+  for (let file of files) {
+    if (file.name === name) {
+      filePath = file.path;
+      break;
+    }
+  }
+  return filePath;
+};
+
+// Get only files from the dataTransfer items list
+export const getFiles = dataTransfer => {
+  let entries = [];
+  const { items, files } = dataTransfer;
+  for (let i = 0; i < items.length; i++) {
+    const entry = getAsEntry(items[i]);
+    if (entry !== null && entry.isFile) {
+      // Has valid path
+      const filePath = getFilePath(entry.name, files);
+      if (filePath) {
+        entries.push({ entry, filePath });
+      }
+    }
+  }
+  return entries;
+};
+
+// Generate a valid file tree from dataTransfer:
+// - Ignores directory entries
+// - Ignores recursive search
+export const getTree = async dataTransfer => {
+  let tree = [];
+  if (dataTransfer) {
+    const { items, files } = dataTransfer;
+    // Handle single item drop
+    if (items.length === 1) {
+      const { path } = files[0];
+      const entry = getAsEntry(items[0]);
+      // Handle entry
+      if (entry) {
+        const root = { entry, 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}` });
+            }
+          });
+        }
+        // Hanlde file
+        if (root.entry.isFile) {
+          tree.push(root);
+        }
+      }
+    }
+    // Handle multiple items drop
+    if (items.length > 1) {
+      tree = tree.concat(getFiles(dataTransfer));
+    }
+  }
+  return tree;
+};