Send images with their imageInfo (size, mymetype, width & height)

5 files changed, 89 insertions, 17 deletions

diff --git a/webclient/components/fileUpload/file-upload-service.js b/webclient/components/fileUpload/file-upload-service.js
index d620e6a4d0..65c24f309c 100644
--- a/webclient/components/fileUpload/file-upload-service.js
+++ b/webclient/components/fileUpload/file-upload-service.js
@@ -27,10 +27,10 @@ angular.module('mFileUpload', [])
      * Upload an HTML5 file to a server and returned a promise
      * that will provide the URL of the uploaded file.
      */
-    this.uploadFile = function(file) {
+    this.uploadFile = function(file, body) {
         var deferred = $q.defer();
         console.log("Uploading " + file.name + "... to /matrix/content");
-        matrixService.uploadContent(file).then(
+        matrixService.uploadContent(file, body).then(
             function(response) {
                 var content_url = location.origin + "/matrix/content/" + response.data.content_token;
                 console.log("   -> Successfully uploaded! Available at " + content_url);
diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js
index 664c5967af..cd37a0c234 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -204,11 +204,11 @@ angular.module('matrixService', [])
         },
 
         // Send an image message
-        sendImageMessage: function(room_id, image_url, image_alt, msg_id) {
+        sendImageMessage: function(room_id, image_url, image_body, msg_id) {
             var content = {
                  msgtype: "m.image",
                  url: image_url,
-                 body: image_alt
+                 body: image_body
             };
 
             return this.sendMessage(room_id, msg_id, content);
diff --git a/webclient/components/utilities/utilities-service.js b/webclient/components/utilities/utilities-service.js
new file mode 100644
index 0000000000..fc0ee580dc
--- /dev/null
+++ b/webclient/components/utilities/utilities-service.js
@@ -0,0 +1,53 @@
+/*
+ Copyright 2014 matrix.org
+ 
+ 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';
+
+/*
+ * This service contains multipurpose helper functions.
+ */
+angular.module('mUtilities', [])
+.service('mUtilities', ['$q', function ($q) {
+    /*
+     * Gets the size of an image
+     * @param {File} imageFile the file containing the image
+     * @returns {promise} A promise that will be resolved by an object with 2 members:
+     *   width & height
+     */
+    this.getImageSize = function(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
+            deferred.resolve({
+                width: img.width,
+                height: img.height
+            });
+        };
+        reader.onerror = function(e) {
+            deferred.reject(e);
+        };
+        reader.readAsDataURL(imageFile);
+        
+        return deferred.promise;
+    };
+}]);
\ No newline at end of file
diff --git a/webclient/index.html b/webclient/index.html
index a7e9cd9341..27d9208193 100644
--- a/webclient/index.html
+++ b/webclient/index.html
@@ -25,6 +25,7 @@
     <script src="components/matrix/event-handler-service.js"></script>
     <script src="components/fileInput/file-input-directive.js"></script>
     <script src="components/fileUpload/file-upload-service.js"></script>
+    <script src="components/utilities/utilities-service.js"></script>
 </head>
 
 <body>
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index ca6d3d4a3a..558a865f30 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-angular.module('RoomController', ['ngSanitize'])
-.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'mFileUpload',
-                               function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload) {
+angular.module('RoomController', ['ngSanitize', 'mUtilities'])
+.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'mFileUpload', 'mUtilities',
+                               function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities) {
    'use strict';
     var MESSAGES_PER_PAGINATION = 30;
 
@@ -366,10 +366,10 @@ angular.module('RoomController', ['ngSanitize'])
             });
     };
 
-    $scope.sendImage = function(url) {
+    $scope.sendImage = function(url, body) {
         $scope.state.sending = true;
 
-        matrixService.sendImageMessage($scope.room_id, url).then(
+        matrixService.sendImageMessage($scope.room_id, url, body).then(
             function() {
                 console.log("Image sent");
                 $scope.state.sending = false;
@@ -386,17 +386,35 @@ angular.module('RoomController', ['ngSanitize'])
 
             $scope.state.sending = true;
 
-            // First download the image to the Internet
-            console.log("Uploading image...");
-            mFileUpload.uploadFile($scope.imageFileToSend).then(
-                function(url) {
-                    // Then share the URL
-                    $scope.sendImage(url);
+            // First, get the image sise
+            mUtilities.getImageSize($scope.imageFileToSend).then(
+                function(size) {
+
+                    // Upload the image to the Internet
+                    console.log("Uploading image...");
+                    mFileUpload.uploadFile($scope.imageFileToSend).then(
+                        function(url) {
+                            // Build the image info data
+                            var imageInfo = {
+                                size: $scope.imageFileToSend.size,
+                                mimetype: $scope.imageFileToSend.type,
+                                w: size.width,
+                                h: size.height
+                            };
+
+                            // Then share the URL and the metadata
+                            $scope.sendImage(url, imageInfo);
+                        },
+                        function(error) {
+                            $scope.feedback = "Can't upload image";
+                            $scope.state.sending = false;
+                        }
+                    );
                 },
                 function(error) {
-                    $scope.feedback = "Can't upload image";
+                    $scope.feedback = "Can't get selected image size";
                     $scope.state.sending = false;
-                } 
+                }
             );
         }
     });