Initial upload support.

src/styles/main.scss

@@ -39,6 +39,7 @@
 @import "components/bar";
 @import "components/buddylist";
 @import "components/buddypicturecapture";
+@import "components/buddypictureupload";
 @import "components/settings";
 @import "components/chat";
 @import "components/usability";

static/js/directives/buddypicturecapture.js

@@ -61,7 +61,7 @@ define(['jquery', 'underscore', 'text!partials/buddypicturecapture.html'], funct
 				}
 			};
 
-			var writeVideoToCanvas = function(canvas) {
+			$scope.writeToCanvas = function(canvas, data) {
 
 				var videoWidth = $scope.video.videoWidth;
 				var videoHeight = $scope.video.videoHeight;
@@ -83,12 +83,12 @@ define(['jquery', 'underscore', 'text!partials/buddypicturecapture.html'], funct
 					height = height * aspectRatio;
 
 				}
-				canvas.getContext("2d").drawImage($scope.video, x, y, width, height);
+				canvas.getContext("2d").drawImage(data, x, y, width, height);
 
 			}
 
 			var writePreviewPic = function() {
-				writeVideoToCanvas($scope.canvasPrev);
+				$scope.writeToCanvas($scope.canvasPrev, $scope.video);
 				$scope.preview = $scope.canvasPrev.toDataURL("image/jpeg");
 			};
 
@@ -167,7 +167,7 @@ define(['jquery', 'underscore', 'text!partials/buddypicturecapture.html'], funct
 			};
 
 			$scope.setAsProfilePicture = function() {
-				writeVideoToCanvas($scope.canvasPic);
+				$scope.writeToCanvas($scope.canvasPic, $scope.video);
 				$scope.user.buddyPicture = $scope.canvasPic.toDataURL("image/jpeg");
 				//console.info("Image size", $scope.user.buddyPicture.length);
 				$scope.cancelPicture();

static/js/directives/buddypictureupload.js

@@ -23,61 +23,111 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 	// buddyPictureUpload
 	return ["$compile", function($compile) {
 
-		var controller = ['$scope', 'safeApply', '$timeout', '$q', function($scope, safeApply, $timeout, $q) {
+		var controller = ['$scope', 'safeApply', '$timeout', '$q', 'translation', function($scope, safeApply, $timeout, $q, translation) {
 
+			var previewWidth = 198;
+			var previewHeight = 198;
 			$scope.showUploadPicture = false;
 			$scope.previewUpload = false;
+			$scope.imgData = null;
+			$scope.error = {
+				msg: null
+			};
+			$scope.text = {
+				initial: 'Please choose a picture to upload',
+				again: 'Upload a different picture'
+			};
+
+			var setUploadImageDimension = function(data) {
+				var img = new Image();
+				img.onload = function() {
+					if(this.width < previewWidth && this.height < previewHeight) {
+						$scope.prevImage.style.height = null;
+						$scope.prevImage.style.width = null;
+						return;
+					}
+					if (this.width < this.height) {
+						$scope.prevImage.style.width = previewWidth + 'px';
+						$scope.prevImage.style.height = null;
+						console.log('changed width');
+					} else {
+						$scope.prevImage.style.height = previewHeight + 'px';
+						$scope.prevImage.style.width = null;
+						console.log('changed height');
+					}
+				};
+				img.src = data;
+			};
+
+			$scope.reset = function() {
+				$scope.showUploadPicture = false;
+				$scope.previewUpload = false;
+			};
 
 			$scope.handleUpload = function(event) {
 				var file = event.target.files[0];
-				console.log('file', file);
-
-				if(!file.type.match(/image/)) {
-					error({event: {target: {error: {name: 'NotImage'}}}});
+				if(!file) {
+					return;
 				}
-
-				var reader = new FileReader();
-				reader.readAsArrayBuffer(file);
+				console.log('file', file);
 
 				var progress = function(event) {
 					console.log('file progress', event);
 				};
 				var load = function(event) {
 					console.log('file load', event);
-					var fileBuffer = event.target.result;
-					// var context = $scope.uploadPrev.getContext('2d');
-					// context.putImageData(fileBuffer, 0, 0);
-					// $scope.previewUpload = true;
+					$scope.$apply(function(scope) {
+						scope.imgData = event.target.result;
+						setUploadImageDimension(scope.imgData);
+						$scope.previewUpload = true;
+					});
 				};
 				var error = function(event) {
 					console.log('file error', event);
 					if(event.target.error.name == 'NotReadableError') {
-						// file couldn't be read
+						$scope.$apply(function(scope) {
+							scope.error.msg = "The file couldn't be read";
+						});
 					}
 					if(event.target.error.name == 'NotImage') {
-						// file is not an image
+						$scope.$apply(function(scope) {
+							scope.error.msg = "The file is not an image.";
+						});
 					}
 				};
 
-				reader.onprogress = progress;
-				reader.onload = load;
-				reader.onerror = error;
+				if(!file.type.match(/image/)) {
+					error({target: {error: {name: 'NotImage'}}});
+				} else {
+					var reader = new FileReader();
+					reader.readAsDataURL(file);
+
+					reader.onprogress = progress;
+					reader.onload = load;
+					reader.onerror = error;
+				}
+			};
+
+			$scope.usePicture = function() {
+				$scope.writeToCanvas($scope.canvasPic, $scope.prevImage);
+				$scope.user.buddyPicture = $scope.canvasPic.toDataURL("image/jpeg");
+				$scope.reset();
+				safeApply($scope);
 			};
 
 		}];
 
 		var link = function($scope, $element) {
-
+			$scope.prevImage = $(".showUploadPicture .preview").get(0);
 			$element.find("#uploadFile").on('change', $scope.handleUpload);
 			$scope.uploadPrev = $element.find("canvas.uploadPrev").get(0);
 			$($scope.uploadPrev).attr($scope.captureSize);
-
 		};
 
 		return {
 			restrict: 'E',
 			transclude: true,
-			replace: true,
+			replace: false,
 			template: template,
 			controller: controller,
 			link: link

static/partials/buddypictureupload.html

@@ -1,11 +1,13 @@
-<div class="collapse" collapse="!showUploadPicture">
-	<div class="buddyPictureUpload">
+<div class="buddyPictureUpload collapse" collapse="!showUploadPicture">
+	<div class="showUploadPicture"  ng-show="previewUpload">
 		<canvas class="uploadPrev hidden"></canvas>
-		<img class="preview" ng-class="{previewUpload: previewUpload}" ng-show="previewUpload" ng-src="{{previewUpload}}" />
-		<p>Please choose a picture to upload</p>
-		<div><input id="uploadFile" type="file"></div>
-		<br>
+		<img class="preview" ng-class="{previewUpload: previewUpload}" ng-src="{{imgData}}" />
 	</div>
-	<a class="btn btn-small btn-default" ng-click="showUploadPicture = false"> {{_('Cancel')}}</a>
-	<a class="btn btn-small btn-primary" ng-click="setAsProfilePicture()"> {{_('Set as Profile Picture')}}</a>
+	<div class="alert alert-warning" ng-if="error.msg">{{error.msg}}<button type="button" class="close" ng-click="error.msg = null"><span>&times;</span></button></div>
+	<p ng-if="!previewUpload">{{text.initial}}</p>
+	<p ng-if="previewUpload">{{text.again}}</p>
+	<div><input id="uploadFile" type="file"></div>
+	<br>
+	<a class="btn btn-small btn-default" ng-click="reset()"> {{_('Cancel')}}</a>
+	<a class="btn btn-small btn-primary" ng-click="usePicture()"> {{_('Set as Profile Picture')}}</a>
 </div>

static/partials/settings.html

@@ -8,9 +8,7 @@
         <div class="form-group">
           <label class="col-xs-4 control-label">{{_('Your picture')}}</label>
             <div class="col-xs-8">
-              <label>
                 <buddy-picture-capture></buddy-picture-capture>
-              </label>
             </div>
         </div>
         <div class="form-group">