Mirrors
/
synapse
mirror of https://github.com/element-hq/synapse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Emmanuel ROHEE 2014-08-20 16:18:50 +02:00
parent da2f5aac0e
commit 6d3391f2f0
5 changed files with 89 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,10 +27,10 @@ angular.module('mFileUpload', [])
* Upload an HTML5 file to a server and returned a promise * Upload an HTML5 file 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.
*/ */
this.uploadFile = function(file) { this.uploadFile = function(file, body) {
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).then( matrixService.uploadContent(file, body).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);

4
webclient/components/matrix/matrix-service.js
View File

@ -204,11 +204,11 @@ angular.module('matrixService', [])
}, },
// Send an image message // 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 = { var content = {
msgtype: "m.image", msgtype: "m.image",
url: image_url, url: image_url,
body: image_alt body: image_body
}; };
return this.sendMessage(room_id, msg_id, content); return this.sendMessage(room_id, msg_id, content);

53
webclient/components/utilities/utilities-service.js Normal file
View File

@ -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;
};
}]);

1
webclient/index.html
View File

@ -25,6 +25,7 @@
<script src="components/matrix/event-handler-service.js"></script> <script src="components/matrix/event-handler-service.js"></script>
<script src="components/fileInput/file-input-directive.js"></script> <script src="components/fileInput/file-input-directive.js"></script>
<script src="components/fileUpload/file-upload-service.js"></script> <script src="components/fileUpload/file-upload-service.js"></script>
<script src="components/utilities/utilities-service.js"></script>
</head> </head>
<body> <body>

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

@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
angular.module('RoomController', ['ngSanitize']) angular.module('RoomController', ['ngSanitize', 'mUtilities'])
.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'mFileUpload', .controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService', 'mFileUpload', 'mUtilities',
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService, mFileUpload) { 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;
@ -366,10 +366,10 @@ angular.module('RoomController', ['ngSanitize'])
}); });
}; };
$scope.sendImage = function(url) { $scope.sendImage = function(url, body) {
$scope.state.sending = true; $scope.state.sending = true;
matrixService.sendImageMessage($scope.room_id, url).then( matrixService.sendImageMessage($scope.room_id, url, body).then(
function() { function() {
console.log("Image sent"); console.log("Image sent");
$scope.state.sending = false; $scope.state.sending = false;
@ -386,15 +386,33 @@ angular.module('RoomController', ['ngSanitize'])
$scope.state.sending = true; $scope.state.sending = true;
// First download the image to the Internet // First, get the image sise
console.log("Uploading image..."); mUtilities.getImageSize($scope.imageFileToSend).then(
mFileUpload.uploadFile($scope.imageFileToSend).then( function(size) {
function(url) {
// Then share the URL // Upload the image to the Internet
$scope.sendImage(url); 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) { function(error) {
$scope.feedback = "Can't upload image"; $scope.feedback = "Can't get selected image size";
$scope.state.sending = false; $scope.state.sending = false;
} }
); );