diff --git a/app/lib/components/FileSharing/DragDropSharing.jsx b/app/lib/components/FileSharing/DragDropSharing.jsx
new file mode 100644
index 0000000..20ceade
--- /dev/null
+++ b/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>
+);
\ No newline at end of file
diff --git a/app/lib/components/FileSharing/index.jsx b/app/lib/components/FileSharing/index.jsx
index 35c5cb1..398d0b8 100644
--- a/app/lib/components/FileSharing/index.jsx
+++ b/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)
diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx
index bfb12e9..a4d752a 100644
--- a/app/lib/components/Room.jsx
+++ b/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,102 +76,106 @@ class Room extends React.Component
 		}[room.mode];
 
 		return (
-			<Appear duration={300}>
-				<div data-component='Room'>
-					<FullScreenView advancedMode={room.advancedMode} />
-					<div
-						className='room-wrapper'
-						style={{
-							width : toolAreaOpen ? '80%' : '100%'
-						}}
-					>
-						<Notifications />
+			<Fragment>
+				<HoldingOverlay />
 
-						<ToolAreaButton />
-
-						{room.advancedMode ?
-							<div className='state' data-tip='Server status'>
-								<div className={classnames('icon', room.state)} />
-								<p className={classnames('text', room.state)}>{room.state}</p>
-							</div>
-							:null
-						}
-									
+				<Appear duration={300}>
+					<div data-component='Room'>
+						<FullScreenView advancedMode={room.advancedMode} />
 						<div
-							className={classnames('room-link-wrapper room-controls', {
-								'visible' : this.props.room.toolbarsVisible
-							})}
+							className='room-wrapper'
+							style={{
+								width : toolAreaOpen ? '80%' : '100%'
+							}}
 						>
-							<div className='room-link'>
-								<CopyToClipboard
-									text={room.url}
-									onCopy={onRoomLinkCopy}
-								>
-									<a
-										className='link'
-										href={room.url}
-										target='_blank'
-										data-tip='Click to copy room link'
-										rel='noopener noreferrer'
-										onClick={(event) =>
-										{
-											// If this is a 'Open in new window/tab' don't prevent
-											// click default action.
-											if (
-												event.ctrlKey || event.shiftKey || event.metaKey ||
-													// Middle click (IE > 9 and everyone else).
-													(event.button && event.button === 1)
-											)
-											{
-												return;
-											}
-		
-											event.preventDefault();
-										}}
-									>
-										invitation link
-									</a>
-								</CopyToClipboard>
-							</div>
-						</div>
+							<Notifications />
 
-						<View advancedMode={room.advancedMode} />
+							<ToolAreaButton />
 
-						<Draggable handle='.me-container' bounds='body' cancel='.display-name'>
+							{room.advancedMode ?
+								<div className='state' data-tip='Server status'>
+									<div className={classnames('icon', room.state)} />
+									<p className={classnames('text', room.state)}>{room.state}</p>
+								</div>
+								:null
+							}
+										
 							<div
-								className={classnames('me-container', {
-									'active-speaker' : amActiveSpeaker
+								className={classnames('room-link-wrapper room-controls', {
+									'visible' : this.props.room.toolbarsVisible
 								})}
 							>
-								<Me
+								<div className='room-link'>
+									<CopyToClipboard
+										text={room.url}
+										onCopy={onRoomLinkCopy}
+									>
+										<a
+											className='link'
+											href={room.url}
+											target='_blank'
+											data-tip='Click to copy room link'
+											rel='noopener noreferrer'
+											onClick={(event) =>
+											{
+												// If this is a 'Open in new window/tab' don't prevent
+												// click default action.
+												if (
+													event.ctrlKey || event.shiftKey || event.metaKey ||
+														// Middle click (IE > 9 and everyone else).
+														(event.button && event.button === 1)
+												)
+												{
+													return;
+												}
+			
+												event.preventDefault();
+											}}
+										>
+											invitation link
+										</a>
+									</CopyToClipboard>
+								</div>
+							</div>
+
+							<View advancedMode={room.advancedMode} />
+
+							<Draggable handle='.me-container' bounds='body' cancel='.display-name'>
+								<div
+									className={classnames('me-container', {
+										'active-speaker' : amActiveSpeaker
+									})}
+								>
+									<Me
+										advancedMode={room.advancedMode}
+									/>
+								</div>
+							</Draggable>
+
+							<Sidebar />
+
+							<ReactTooltip
+								effect='solid'
+								delayShow={100}
+								delayHide={100}
+							/>
+						</div>
+						<div
+							className='toolarea-wrapper'
+							style={{
+								width : toolAreaOpen ? '20%' : '0%'
+							}}
+						>
+							{toolAreaOpen ?
+								<ToolArea
 									advancedMode={room.advancedMode}
 								/>
-							</div>
-						</Draggable>
-
-						<Sidebar />
-
-						<ReactTooltip
-							effect='solid'
-							delayShow={100}
-							delayHide={100}
-						/>
+								:null
+							}
+						</div>
 					</div>
-					<div
-						className='toolarea-wrapper'
-						style={{
-							width : toolAreaOpen ? '20%' : '0%'
-						}}
-					>
-						{toolAreaOpen ?
-							<ToolArea
-								advancedMode={room.advancedMode}
-							/>
-							:null
-						}
-					</div>
-				</div>
-			</Appear>
+				</Appear>
+			</Fragment>
 		);
 	}
 }
diff --git a/app/stylus/components/FileSharing.styl b/app/stylus/components/FileSharing.styl
index 736ff1b..dd158da 100644
--- a/app/stylus/components/FileSharing.styl
+++ b/app/stylus/components/FileSharing.styl
@@ -58,4 +58,23 @@
 			}
 		}
 	}
+}
+
+#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;
 }
\ No newline at end of file
diff --git a/app/stylus/index.styl b/app/stylus/index.styl
index 328df97..3ae98ce 100644
--- a/app/stylus/index.styl
+++ b/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;