implement a pretty droptarget when uploading files

skins/base/css/organisms/RoomView.css

@@ -40,6 +40,42 @@ limitations under the License.
     flex: 0 0 88px;
 }
 
+.mx_RoomView_fileDropTarget {
+    min-width: 0px;
+    max-width: 720px;
+    width: 100%;
+    font-size: 20px;
+    text-align: center;
+
+    pointer-events: none;
+
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-left: -12px;
+
+    -webkit-border-top-left-radius: 10px;
+    -webkit-border-top-right-radius: 10px;
+    -moz-border-radius-topleft: 10px;
+    -moz-border-radius-topright: 10px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 2px dashed #80cef4;
+    border-bottom: none;
+    position: absolute;
+    top: 88px;
+    bottom: 0px;
+    z-index: 3000;
+}
+
+.mx_RoomView_fileDropTargetLabel {
+    top: 50%;
+    width: 100%;
+    margin-top: -50px;
+    position: absolute;
+}
+
 .mx_RoomView_auxPanel {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;

skins/base/views/organisms/RoomView.js

@@ -155,15 +155,23 @@ module.exports = React.createClass({
             }
 
             var roomEdit = null;
-
             if (this.state.editingRoomSettings) {
                 roomEdit = <RoomSettings ref="room_settings" onSaveClick={this.onSaveClick} room={this.state.room} />;
             }
-
             if (this.state.uploadingRoomSettings) {
                 roomEdit = <Loader/>;
             }
 
+            var fileDropTarget = null;
+            if (this.state.draggingFile) {
+                fileDropTarget = <div className="mx_RoomView_fileDropTarget">
+                                    <div className="mx_RoomView_fileDropTargetLabel">
+                                        <img src="img/upload-big.png" width="46" height="61" alt="Drop File Here"/><br/>
+                                        Drop File Here
+                                    </div>
+                                 </div>;
+            }
+
             return (
                 <div className="mx_RoomView">
                     <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings}
@@ -174,6 +182,7 @@ module.exports = React.createClass({
                     </div>
                     <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
                         <div className="mx_RoomView_messageListWrapper">
+                            { fileDropTarget }    
                             <ol className="mx_RoomView_MessageList" aria-live="polite">
                                 <li className={scrollheader_classes}>
                                 </li>

src/controllers/organisms/RoomView.js

@@ -52,7 +52,8 @@ module.exports = {
             messageCap: INITIAL_SIZE,
             editingRoomSettings: false,
             uploadingRoomSettings: false,
-            numUnreadMessages: 0
+            numUnreadMessages: 0,
+            draggingFile: false,
         }
     },
 
@@ -69,6 +70,8 @@ module.exports = {
             var messageWrapper = this.refs.messageWrapper.getDOMNode();
             messageWrapper.removeEventListener('drop', this.onDrop);
             messageWrapper.removeEventListener('dragover', this.onDragOver);
+            messageWrapper.removeEventListener('dragleave', this.onDragLeaveOrEnd);
+            messageWrapper.removeEventListener('dragend', this.onDragLeaveOrEnd);
         }
         dis.unregister(this.dispatcherRef);
         if (MatrixClientPeg.get()) {
@@ -173,6 +176,8 @@ module.exports = {
 
             messageWrapper.addEventListener('drop', this.onDrop);
             messageWrapper.addEventListener('dragover', this.onDragOver);
+            messageWrapper.addEventListener('dragleave', this.onDragLeaveOrEnd);
+            messageWrapper.addEventListener('dragend', this.onDragLeaveOrEnd);
 
             messageWrapper.scrollTop = messageWrapper.scrollHeight;
 
@@ -272,6 +277,7 @@ module.exports = {
         var items = ev.dataTransfer.items;
         if (items.length == 1) {
             if (items[0].kind == 'file') {
+                this.setState({ draggingFile : true });
                 ev.dataTransfer.dropEffect = 'copy';
             }
         }
@@ -280,12 +286,19 @@ module.exports = {
     onDrop: function(ev) {
         ev.stopPropagation();
         ev.preventDefault();
+        this.setState({ draggingFile : false });
         var files = ev.dataTransfer.files;
         if (files.length == 1) {
             this.uploadFile(files[0]);
         }
     },
 
+    onDragLeaveOrEnd: function(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.setState({ draggingFile : false });
+    },
+
     uploadFile: function(file) {
         this.setState({
             upload: {