mirror of
https://mau.dev/maunium/synapse.git
synced 2024-12-15 04:13:52 +01:00
Send images with their imageInfo (size, mymetype, width & height)
This commit is contained in:
parent
da2f5aac0e
commit
6d3391f2f0
5 changed files with 89 additions and 17 deletions
|
@ -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);
|
||||||
|
|
|
@ -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
53
webclient/components/utilities/utilities-service.js
Normal 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;
|
||||||
|
};
|
||||||
|
}]);
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue