diff --git a/webclient/components/fileUpload/file-upload-service.js b/webclient/components/fileUpload/file-upload-service.js
index 65c24f309c..6606f31e22 100644
--- a/webclient/components/fileUpload/file-upload-service.js
+++ b/webclient/components/fileUpload/file-upload-service.js
@@ -20,17 +20,18 @@
/*
* Upload an HTML5 file to a server
*/
-angular.module('mFileUpload', [])
-.service('mFileUpload', ['matrixService', '$q', function (matrixService, $q) {
+angular.module('mFileUpload', ['matrixService', 'mUtilities'])
+.service('mFileUpload', ['$q', 'matrixService', 'mUtilities', function ($q, matrixService, mUtilities) {
/*
- * Upload an HTML5 file to a server and returned a promise
+ * Upload an HTML5 file or blob to a server and returned a promise
* that will provide the URL of the uploaded file.
+ * @param {File|Blob} file the file data to send
*/
- this.uploadFile = function(file, body) {
+ this.uploadFile = function(file) {
var deferred = $q.defer();
console.log("Uploading " + file.name + "... to /matrix/content");
- matrixService.uploadContent(file, body).then(
+ matrixService.uploadContent(file).then(
function(response) {
var content_url = location.origin + "/matrix/content/" + response.data.content_token;
console.log(" -> Successfully uploaded! Available at " + content_url);
@@ -44,4 +45,134 @@ angular.module('mFileUpload', [])
return deferred.promise;
};
+
+ /*
+ * Upload an image file plus generate a thumbnail of it and upload it so that
+ * we will have all information to fulfill an image message request data.
+ * @param {File} imageFile the imageFile to send
+ * @param {Integer} thumbnailSize the max side size of the thumbnail to create
+ * @returns {promise} A promise that will be resolved by a image message object
+ * ready to be send with the Matrix API
+ */
+ this.uploadImageAndThumbnail = function(imageFile, thumbnailSize) {
+ var self = this;
+ var deferred = $q.defer();
+
+ console.log("uploadImageAndThumbnail " + imageFile.name + " - thumbnailSize: " + thumbnailSize);
+
+ // The message structure that will be returned in the promise
+ var imageMessage = {
+ msgtype: "m.image",
+ url: undefined,
+ body: {
+ size: undefined,
+ w: undefined,
+ h: undefined,
+ mimetype: undefined
+ },
+ thumbnail_url: undefined,
+ thumbnail_info: {
+ size: undefined,
+ w: undefined,
+ h: undefined,
+ mimetype: undefined
+ }
+ };
+
+ // First, get the image size
+ mUtilities.getImageSize(imageFile).then(
+ function(size) {
+
+ // The final operation: send imageFile
+ var uploadImage = function() {
+ self.uploadFile(imageFile).then(
+ function(url) {
+ // Update message metadata
+ imageMessage.url = url;
+ imageMessage.body = {
+ size: imageFile.size,
+ w: size.width,
+ h: size.height,
+ mimetype: imageFile.type
+ };
+
+ // If there is no thumbnail (because the original image is smaller than thumbnailSize),
+ // reuse the original image info for thumbnail data
+ if (!imageMessage.thumbnail_url) {
+ imageMessage.thumbnail_url = imageMessage.url;
+ imageMessage.thumbnail_info = imageMessage.body;
+ }
+
+ // We are done
+ deferred.resolve(imageMessage);
+ },
+ function(error) {
+ console.log(" -> Can't upload image");
+ deferred.reject(error);
+ }
+ );
+ };
+
+ // Create a thumbnail if the image size exceeds thumbnailSize
+ if (Math.max(size.width, size.height) > thumbnailSize) {
+ console.log(" Creating thumbnail...");
+ mUtilities.resizeImage(imageFile, thumbnailSize).then(
+ function(thumbnailBlob) {
+
+ // Get its size
+ mUtilities.getImageSize(thumbnailBlob).then(
+ function(thumbnailSize) {
+ console.log(" -> Thumbnail size: " + JSON.stringify(thumbnailSize));
+
+ // Upload it to the server
+ self.uploadFile(thumbnailBlob).then(
+ function(thumbnailUrl) {
+
+ // Update image message data
+ imageMessage.thumbnail_url = thumbnailUrl;
+ imageMessage.thumbnail_info = {
+ size: thumbnailBlob.size,
+ w: thumbnailSize.width,
+ h: thumbnailSize.height,
+ mimetype: thumbnailBlob.type
+ };
+
+ // Then, upload the original image
+ uploadImage();
+ },
+ function(error) {
+ console.log(" -> Can't upload thumbnail");
+ deferred.reject(error);
+ }
+ );
+ },
+ function(error) {
+ console.log(" -> Failed to get thumbnail size");
+ deferred.reject(error);
+ }
+ );
+
+ },
+ function(error) {
+ console.log(" -> Failed to create thumbnail: " + error);
+ deferred.reject(error);
+ }
+ );
+ }
+ else {
+ // No need of thumbnail
+ console.log(" Thumbnail is not required");
+ uploadImage();
+ }
+
+ },
+ function(error) {
+ console.log(" -> Failed to get image size");
+ deferred.reject(error);
+ }
+ );
+
+ return deferred.promise;
+ };
+
}]);
diff --git a/webclient/components/utilities/utilities-service.js b/webclient/components/utilities/utilities-service.js
index f9e52eacf8..9cf858ef39 100644
--- a/webclient/components/utilities/utilities-service.js
+++ b/webclient/components/utilities/utilities-service.js
@@ -23,7 +23,7 @@ angular.module('mUtilities', [])
.service('mUtilities', ['$q', function ($q) {
/*
* Get the size of an image
- * @param {File} imageFile the file containing the image
+ * @param {File|Blob} imageFile the file containing the image
* @returns {promise} A promise that will be resolved by an object with 2 members:
* width & height
*/
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js
index 35abeeca06..7de50dd960 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -19,6 +19,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities) {
'use strict';
var MESSAGES_PER_PAGINATION = 30;
+ var THUMBNAIL_SIZE = 320;
// Room ids. Computed and resolved in onInit
$scope.room_id = undefined;
@@ -386,33 +387,22 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
$scope.state.sending = true;
- // 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);
+ // Upload this image with its thumbnail to Internet
+ mFileUpload.uploadImageAndThumbnail($scope.imageFileToSend, THUMBNAIL_SIZE).then(
+ function(imageMessage) {
+ // imageMessage is complete message structure, send it as is
+ matrixService.sendMessage($scope.room_id, undefined, imageMessage).then(
+ function() {
+ console.log("Image message sent");
+ $scope.state.sending = false;
},
function(error) {
- $scope.feedback = "Can't upload image";
+ $scope.feedback = "Failed to send image message: " + error.data.error;
$scope.state.sending = false;
- }
- );
+ });
},
function(error) {
- $scope.feedback = "Can't get selected image size";
+ $scope.feedback = "Can't upload image";
$scope.state.sending = false;
}
);
|
