Upload files and images

package.json

@@ -23,6 +23,7 @@
     "classnames": "^2.1.2",
     "flux": "^2.0.3",
     "matrix-js-sdk": "0.1.1",
+    "q": "^1.4.1",
     "react": "^0.13.0",
     "react-loader": "^1.4.0"
   },

src/ContentMessages.js

@@ -0,0 +1,82 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var q = require('q');
+var extend = require('./extend');
+
+function infoForImageFile(imageFile) {
+    var deferred = q.defer();
+
+    // Load the file into an html element
+    var img = document.createElement("img");
+
+    var reader = new FileReader();
+    reader.onload = function(e) {
+        img.src = e.target.result;
+
+        // Once ready, returns its size
+        img.onload = function() {
+            deferred.resolve({
+                w: img.width,
+                h: img.height
+            });
+        };
+        img.onerror = function(e) {
+            deferred.reject(e);
+        };
+    };
+    reader.onerror = function(e) {
+        deferred.reject(e);
+    };
+    reader.readAsDataURL(imageFile);
+
+    return deferred.promise;
+}
+
+function sendContentToRoom(file, roomId, matrixClient) {
+    var content = {
+        body: file.name,
+        info: {
+            size: file.size,
+            mimetype: file.type
+        }
+    };
+
+    var def = q.defer();
+    if (file.type.indexOf('image/') == 0) {
+        content.msgtype = 'm.image';
+        infoForImageFile(file).then(function(imageInfo) {
+            extend(content.info, imageInfo);
+            def.resolve();
+        });
+    } else {
+        content.msgtype = 'm.file';
+        def.resolve();
+    }
+
+    return def.promise.then(function() {
+        return matrixClient.uploadContent(file);
+    }).then(function(url) {
+        content.url = url;
+        return matrixClient.sendMessage(roomId, content);
+    });
+}
+
+module.exports = {
+    sendContentToRoom: sendContentToRoom
+};

src/controllers/organisms/RoomView.js

@@ -18,6 +18,8 @@ limitations under the License.
 
 var MatrixClientPeg = require("../../MatrixClientPeg");
 var React = require("react");
+var q = require("q");
+var ContentMessages = require("../../ContentMessages");
 
 var dis = require("../../dispatcher");
 
@@ -48,7 +50,7 @@ module.exports = {
     componentWillUnmount: function() {
         if (this.refs.messageWrapper) {
             var messageWrapper = this.refs.messageWrapper.getDOMNode();
-            messageWrapper.removeEventListener('drop', this.handleDrop);
+            messageWrapper.removeEventListener('drop', this.onDrop);
         }
         dis.unregister(this.dispatcherRef);
         if (MatrixClientPeg.get()) {
@@ -103,7 +105,8 @@ module.exports = {
         if (this.refs.messageWrapper) {
             var messageWrapper = this.refs.messageWrapper.getDOMNode();
 
-            messageWrapper.addEventListener('drop', this.handleDrop);
+            messageWrapper.addEventListener('drop', this.onDrop);
+            messageWrapper.addEventListener('dragover', this.onDragOver);
 
             messageWrapper.scrollTop = messageWrapper.scrollHeight;
 
@@ -186,11 +189,34 @@ module.exports = {
         if (!this.state.paginating) this.fillSpace();
     },
 
-    handleDrop: function(ev) {
+    onDragOver: function(ev) {
         ev.stopPropagation();
-        var files = evt.dataTransfer.files;
+        ev.preventDefault();
 
-        
+        ev.dataTransfer.dropEffect = 'none';
+
+        var items = ev.dataTransfer.items;
+        if (items.length == 1) {
+            if (items[0].kind == 'file') {
+                ev.dataTransfer.dropEffect = 'copy';
+            }
+        }
+    },
+
+    onDrop: function(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        var files = ev.dataTransfer.files;
+
+        if (files.length == 1) {
+            ContentMessages.sendContentToRoom(
+                files[0], this.props.roomId, MatrixClientPeg.get()
+            ).progress(function(ev) {
+                //console.log("Upload: "+ev.loaded+" / "+ev.total);
+            }).done(undefined, function() {
+                // display error message
+            });
+        }
     },
 
     getEventTiles: function() {