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/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js
index cd37a0c234..fa5a6091d3 100644
--- a/webclient/components/matrix/matrix-service.js
+++ b/webclient/components/matrix/matrix-service.js
@@ -61,14 +61,22 @@ angular.module('matrixService', [])
return doBaseRequest(config.homeserver, method, path, params, data, undefined);
};
- var doBaseRequest = function(baseUrl, method, path, params, data, headers) {
- return $http({
+ var doBaseRequest = function(baseUrl, method, path, params, data, headers, $httpParams) {
+
+ var request = {
method: method,
url: baseUrl + path,
params: params,
data: data,
headers: headers
- });
+ };
+
+ // Add additional $http parameters
+ if ($httpParams) {
+ angular.extend(request, $httpParams);
+ }
+
+ return $http(request);
};
@@ -326,7 +334,17 @@ angular.module('matrixService', [])
var params = {
access_token: config.access_token
};
- return doBaseRequest(config.homeserver, "POST", path, params, file, headers);
+
+ // If the file is actually a Blob object, prevent $http from JSON-stringified it before sending
+ // (Equivalent to jQuery ajax processData = false)
+ var $httpParams;
+ if (file instanceof Blob) {
+ $httpParams = {
+ transformRequest: angular.identity
+ };
+ }
+
+ return doBaseRequest(config.homeserver, "POST", path, params, file, headers, $httpParams);
},
// start listening on /events
diff --git a/webclient/components/utilities/utilities-service.js b/webclient/components/utilities/utilities-service.js
index fc0ee580dc..9cf858ef39 100644
--- a/webclient/components/utilities/utilities-service.js
+++ b/webclient/components/utilities/utilities-service.js
@@ -22,8 +22,8 @@
angular.module('mUtilities', [])
.service('mUtilities', ['$q', function ($q) {
/*
- * Gets the size of an image
- * @param {File} imageFile the file containing the image
+ * Get the size of an 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
*/
@@ -50,4 +50,89 @@ angular.module('mUtilities', [])
return deferred.promise;
};
+
+ /*
+ * Resize the image to fit in a square of the side maxSize.
+ * The aspect ratio is kept. The returned image data uses JPEG compression.
+ * Source: http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
+ * @param {File} imageFile the file containing the image
+ * @param {Integer} maxSize the max side size
+ * @returns {promise} A promise that will be resolved by a Blob object containing
+ * the resized image data
+ */
+ this.resizeImage = function(imageFile, maxSize) {
+ var self = this;
+ var deferred = $q.defer();
+
+ var canvas = document.createElement("canvas");
+
+ var img = document.createElement("img");
+ var reader = new FileReader();
+ reader.onload = function(e) {
+
+ img.src = e.target.result;
+
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(img, 0, 0);
+
+ var MAX_WIDTH = maxSize;
+ var MAX_HEIGHT = maxSize;
+ var width = img.width;
+ var height = img.height;
+
+ if (width > height) {
+ if (width > MAX_WIDTH) {
+ height *= MAX_WIDTH / width;
+ width = MAX_WIDTH;
+ }
+ } else {
+ if (height > MAX_HEIGHT) {
+ width *= MAX_HEIGHT / height;
+ height = MAX_HEIGHT;
+ }
+ }
+ canvas.width = width;
+ canvas.height = height;
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(img, 0, 0, width, height);
+
+ var dataUrl = canvas.toDataURL("image/jpeg", 0.7);
+ deferred.resolve(self.dataURItoBlob(dataUrl));
+ };
+ reader.onerror = function(e) {
+ deferred.reject(e);
+ };
+ reader.readAsDataURL(imageFile);
+
+ return deferred.promise;
+ };
+
+ /*
+ * Convert a dataURI string to a blob
+ * Source: http://stackoverflow.com/a/17682951
+ * @param {String} dataURI the dataURI can be a base64 encoded string or an URL encoded string.
+ * @returns {Blob} the blob
+ */
+ this.dataURItoBlob = function(dataURI) {
+ // convert base64 to raw binary data held in a string
+ // doesn't handle URLEncoded DataURIs
+ var byteString;
+ if (dataURI.split(',')[0].indexOf('base64') >= 0)
+ byteString = atob(dataURI.split(',')[1]);
+ else
+ byteString = unescape(dataURI.split(',')[1]);
+ // separate out the mime component
+ var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+ // write the bytes of the string to an ArrayBuffer
+ var ab = new ArrayBuffer(byteString.length);
+ var ia = new Uint8Array(ab);
+ for (var i = 0; i < byteString.length; i++) {
+ ia[i] = byteString.charCodeAt(i);
+ }
+
+ // write the ArrayBuffer to a blob, and you're done
+ return new Blob([ab],{type: mimeString});
+ };
+
}]);
\ No newline at end of file
|
