Skip to content
Snippets Groups Projects
Commit 6d3391f2 authored by Emmanuel ROHEE's avatar Emmanuel ROHEE
Browse files

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

parent da2f5aac
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
webclient/components/fileUpload/file-upload-service.js
+ 2
− 2
View file @ 6d3391f2
...@@ -27,10 +27,10 @@ angular.module('mFileUpload', []) ...@@ -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);
......
webclient/components/matrix/matrix-service.js
+ 2
− 2
View file @ 6d3391f2
...@@ -204,11 +204,11 @@ angular.module('matrixService', []) ...@@ -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);
......
webclient/components/utilities/utilities-service.js 0 → 100644
+ 53
− 0
View file @ 6d3391f2
/*
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
webclient/index.html
+ 1
− 0
View file @ 6d3391f2
...@@ -25,6 +25,7 @@ ...@@ -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>
......
webclient/room/room-controller.js
+ 31
− 13
View file @ 6d3391f2
...@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and ...@@ -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']) ...@@ -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,17 +386,35 @@ angular.module('RoomController', ['ngSanitize']) ...@@ -386,17 +386,35 @@ 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;
} }
); );
} }
}); });
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment