Add overlay when holding file above drop element

app/lib/components/FileSharing/DragDropSharing.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import dragDrop from 'drag-drop';
+import { shareFiles } from './index';
+
+export const configureDragDrop = () =>
+{
+  dragDrop('body', async(files) => await shareFiles(files));
+};
+
+export const HoldingOverlay = () => (
+  <div id='holding-overlay'>
+    Drop files here to share them
+  </div>
+);

app/lib/components/FileSharing/index.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import WebTorrent from 'webtorrent';
 import createTorrent from 'create-torrent';
-import dragDrop from 'drag-drop';
 import randomString from 'random-string';
 import * as stateActions from '../../redux/stateActions';
 import * as requestActions from '../../redux/requestActions';
@@ -26,7 +25,7 @@ const notifyPeers = (file) =>
 	store.dispatch(requestActions.sendFile(file, displayName, picture));
 };
 
-const shareFiles = async(files) =>
+export const shareFiles = async(files) =>
 {
 	const notification =
 	{
@@ -70,8 +69,6 @@ const shareFiles = async(files) =>
 	});
 };
 
-dragDrop('body', async(files) => await shareFiles(files));
-
 class FileSharing extends Component 
 {
 	constructor(props)

app/lib/components/Room.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { connect } from 'react-redux';
 import ReactTooltip from 'react-tooltip';
 import PropTypes from 'prop-types';
@@ -18,6 +18,9 @@ import Draggable from 'react-draggable';
 import { idle } from '../utils';
 import Sidebar from './Sidebar';
 import Filmstrip from './Filmstrip';
+import { configureDragDrop, HoldingOverlay } from './FileSharing/DragDropSharing';
+
+configureDragDrop();
 
 // Hide toolbars after 10 seconds of inactivity.
 const TIMEOUT = 10 * 1000;
@@ -73,6 +76,9 @@ class Room extends React.Component
 		}[room.mode];
 
 		return (
+			<Fragment>
+				<HoldingOverlay />
+
 				<Appear duration={300}>
 					<div data-component='Room'>
 						<FullScreenView advancedMode={room.advancedMode} />
@@ -169,6 +175,7 @@ class Room extends React.Component
 						</div>
 					</div>
 				</Appear>
+			</Fragment>
 		);
 	}
 }

app/stylus/components/FileSharing.styl

@@ -59,3 +59,22 @@
 		}
 	}
 }
+
+#holding-overlay {
+	display: none;
+}
+
+.drag #holding-overlay {
+	display: flex;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: rgba(0, 0, 0, 0.6);
+	color: #FFF;
+	align-items: center;
+	justify-content: center;
+	font-size: 2rem;
+	z-index: 2000;
+}

app/stylus/index.styl

@@ -34,26 +34,26 @@ body {
 #multiparty-meeting {
 	height: 100%;
 	width: 100%;
-
-	// Components
-	@import './components/Room';
-	@import './components/Sidebar';
-	@import './components/Me';
-	@import './components/Peers';
-	@import './components/Peer';
-	@import './components/PeerView';
-	@import './components/ScreenView';
-	@import './components/Notifications';
-	@import './components/Chat';
-	@import './components/Settings';
-	@import './components/ToolArea';
-	@import './components/ParticipantList';
-	@import './components/FullScreenView';
-	@import './components/FullView';
-	@import './components/Filmstrip';
-	@import './components/FileSharing';
 }
 
+// Components
+@import './components/Room';
+@import './components/Sidebar';
+@import './components/Me';
+@import './components/Peers';
+@import './components/Peer';
+@import './components/PeerView';
+@import './components/ScreenView';
+@import './components/Notifications';
+@import './components/Chat';
+@import './components/Settings';
+@import './components/ToolArea';
+@import './components/ParticipantList';
+@import './components/FullScreenView';
+@import './components/FullView';
+@import './components/Filmstrip';
+@import './components/FileSharing';
+
 // Hack to detect in JS the current media query
 #multiparty-meeting-media-query-detector {
 	position: absolute;