Matrix-Mirrors/synapse-product
1
0
Fork 0
mirror of https://git.anonymousland.org/anonymousland/synapse-product.git synced 2024-12-11 13:24:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

Generate thumbnail client side and send its URL and info with the image message body

Browse Source
This commit is contained in:
Emmanuel ROHEE 2014-08-21 14:30:41 +02:00
parent 9d4bc8985f
commit aac52fce15
3 changed files with 149 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
webclient/components/fileUpload/file-upload-service.js
View File

@ -20,17 +20,18 @@
/* /*
* Upload an HTML5 file to a server * Upload an HTML5 file to a server
*/ */
angular.module('mFileUpload', []) angular.module('mFileUpload', ['matrixService', 'mUtilities'])
.service('mFileUpload', ['matrixService', '$q', function (matrixService, $q) { .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. * 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(); var deferred = $q.defer();
console.log("Uploading " + file.name + "... to /matrix/content"); console.log("Uploading " + file.name + "... to /matrix/content");
matrixService.uploadContent(file, body).then( matrixService.uploadContent(file).then(
function(response) { function(response) {
var content_url = location.origin + "/matrix/content/" + response.data.content_token; var content_url = location.origin + "/matrix/content/" + response.data.content_token;
console.log(" -> Successfully uploaded! Available at " + content_url); console.log(" -> Successfully uploaded! Available at " + content_url);
@ -44,4 +45,134 @@ angular.module('mFileUpload', [])
return deferred.promise; 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;
};
}]); }]);

2
webclient/components/utilities/utilities-service.js
View File

@ -23,7 +23,7 @@ angular.module('mUtilities', [])
.service('mUtilities', ['$q', function ($q) { .service('mUtilities', ['$q', function ($q) {
/* /*
* Get the size of an image * 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: * @returns {promise} A promise that will be resolved by an object with 2 members:
* width & height * width & height
*/ */

38
webclient/room/room-controller.js
View File

@ -19,6 +19,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities) { function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload, mUtilities) {
'use strict'; 'use strict';
var MESSAGES_PER_PAGINATION = 30; var MESSAGES_PER_PAGINATION = 30;
var THUMBNAIL_SIZE = 320;
// Room ids. Computed and resolved in onInit // Room ids. Computed and resolved in onInit
$scope.room_id = undefined; $scope.room_id = undefined;
@ -386,36 +387,25 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities'])
$scope.state.sending = true; $scope.state.sending = true;
// First, get the image sise // Upload this image with its thumbnail to Internet
mUtilities.getImageSize($scope.imageFileToSend).then( mFileUpload.uploadImageAndThumbnail($scope.imageFileToSend, THUMBNAIL_SIZE).then(
function(size) { function(imageMessage) {
// imageMessage is complete message structure, send it as is
// Upload the image to the Internet matrixService.sendMessage($scope.room_id, undefined, imageMessage).then(
console.log("Uploading image..."); function() {
mFileUpload.uploadFile($scope.imageFileToSend).then( console.log("Image message sent");
function(url) { $scope.state.sending = false;
// Build the image info data },
var imageInfo = { function(error) {
size: $scope.imageFileToSend.size, $scope.feedback = "Failed to send image message: " + error.data.error;
mimetype: $scope.imageFileToSend.type, $scope.state.sending = false;
w: size.width, });
h: size.height
};
// Then share the URL and the metadata
$scope.sendImage(url, imageInfo);
}, },
function(error) { function(error) {
$scope.feedback = "Can't upload image"; $scope.feedback = "Can't upload image";
$scope.state.sending = false; $scope.state.sending = false;
} }
); );
},
function(error) {
$scope.feedback = "Can't get selected image size";
$scope.state.sending = false;
}
);
} }
}); });