diff --git a/static/js/directives/buddypictureupload.js b/static/js/directives/buddypictureupload.js
index 726cb6c6..9c719f71 100644
--- a/static/js/directives/buddypictureupload.js
+++ b/static/js/directives/buddypictureupload.js
@@ -27,19 +27,15 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 
 			var previewWidth = 205;
 			var previewHeight = 205;
-			var maxUploadMb = 8;
+			$scope.maxUploadMb = 8;
+			var maxUploadBytes = $scope.maxUploadMb * 1024 * 1024;
 			$scope.showUploadPicture = false;
 			$scope.previewUpload = false;
 			$scope.imgData = null;
 			$scope.error = {
-				read: "The file couldn't be read",
-				image: "The file is not an image.",
-				size: "The file is too large. Max upload size is " + maxUploadMb + 'Mb',
-				current: null
-			};
-			$scope.text = {
-				initial: 'Please choose a picture to upload, max ' + maxUploadMb + 'Mb',
-				again: 'Upload a different picture'
+				read: null,
+				image: null,
+				size: null
 			};
 			$scope.upload = {
 				status: 0
@@ -68,67 +64,6 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 				$scope.prevImage.src = data;
 			};
 
-			$scope.reset = function() {
-				$scope.showUploadPicture = false;
-				$scope.previewUpload = false;
-			};
-
-			$scope.handleUpload = function(event) {
-				var file = event.target.files[0];
-				if (!file) {
-					return;
-				}
-				//console.log('file', file);
-				var progress = function(event) {
-					//console.log('file progress', event);
-					$scope.$apply(function(scope) {
-						$scope.upload.status = event.loaded/event.total * 100;
-					});
-				};
-				var load = function(event) {
-					//console.log('file load', event);
-					$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') {
-						$scope.$apply(function(scope) {
-							scope.error.current = scope.error.read;
-						});
-					}
-					if (event.target.error.name == 'NotImage') {
-						$scope.$apply(function(scope) {
-							scope.error.current = scope.error.image;
-						});
-					}
-					if (event.target.error.name == 'Size') {
-						$scope.$apply(function(scope) {
-							scope.error.current = scope.error.size;
-						});
-					}
-				};
-
-				if (!file.type.match(/image/)) {
-					error({target: {error: {name: 'NotImage'}}});
-				} else if (file.size > maxUploadMb * 1024 * 1024) {
-					error({target: {error: {name: 'Size'}}});
-				} else {
-					$scope.$apply(function(scope) {
-						$scope.upload.status = 5;
-					});
-					var reader = new FileReader();
-					reader.readAsDataURL(file);
-
-					reader.onprogress = progress;
-					reader.onload = load;
-					reader.onerror = error;
-				}
-			};
-
 			var getNumFromPx = function(px) {
 				return px.match(/[\-0-9]+/) ? Number(px.match(/[\-0-9]+/)[0]) : 0;
 			};
@@ -178,7 +113,6 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 				return {width: width, height: height, x: x, y: y};
 			};
 
-
 			var writeUploadToCanvas = function(canvas, img) {
 				var dim = getScaledDimensions(img, canvas);
 				var context = canvas.getContext("2d");
@@ -194,6 +128,71 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 				safeApply($scope);
 			};
 
+			$scope.reset = function() {
+				$scope.showUploadPicture = false;
+				$scope.previewUpload = false;
+			};
+
+			$scope.handleUpload = function(event) {
+				var file = event.target.files[0];
+				if (!file) {
+					return;
+				}
+				//console.log('file', file);
+				var progress = function(event) {
+					//console.log('file progress', event);
+					var percentComplete = event.loaded/event.total * 100;
+					// show complete only when src is loaded in image element
+					if(percentComplete != 100) {
+						$scope.$apply(function(scope) {
+							$scope.upload.status = percentComplete;
+						});
+					}
+				};
+				var load = function(event) {
+					//console.log('file load', event);
+					$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') {
+						$scope.$apply(function(scope) {
+							scope.error.read = true;
+						});
+					}
+					if (event.target.error.name == 'NotImage') {
+						$scope.$apply(function(scope) {
+							scope.error.image = true;
+						});
+					}
+					if (event.target.error.name == 'Size') {
+						$scope.$apply(function(scope) {
+							scope.error.size = true;
+						});
+					}
+				};
+
+				if (!file.type.match(/image/)) {
+					error({target: {error: {name: 'NotImage'}}});
+				} else if (file.size > maxUploadBytes) {
+					error({target: {error: {name: 'Size'}}});
+				} else {
+					$scope.$apply(function(scope) {
+						$scope.upload.status = 5;
+					});
+					var reader = new FileReader();
+					reader.readAsDataURL(file);
+
+					reader.onprogress = progress;
+					reader.onload = load;
+					reader.onerror = error;
+				}
+			};
+
 		}];
 
 		var link = function($scope, $element) {
@@ -259,7 +258,6 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 
 		return {
 			restrict: 'E',
-			transclude: true,
 			replace: false,
 			template: template,
 			controller: controller,
diff --git a/static/partials/buddypictureupload.html b/static/partials/buddypictureupload.html
index e289d497..43b78ca3 100644
--- a/static/partials/buddypictureupload.html
+++ b/static/partials/buddypictureupload.html
@@ -16,9 +16,11 @@
 		</div>
 		<img class="preview" ng-class="{previewUpload: previewUpload}" />
 	</div>
-	<div class="alert alert-warning" ng-if="error.current">{{error.current}}<button type="button" class="close" ng-click="error.current = null"><span>&times;</span></button></div>
-	<p ng-if="!previewUpload">{{text.initial}}</p>
-	<p ng-if="previewUpload">{{text.again}}</p>
+	<div class="alert alert-warning" ng-if="error.read">{{_('The file couldn\'t be read.')}}<button type="button" class="close" ng-click="error.read = null"><span>&times;</span></button></div>
+	<div class="alert alert-warning" ng-if="error.image">{{_('The file is not an image.')}}<button type="button" class="close" ng-click="error.image = null"><span>&times;</span></button></div>
+	<div class="alert alert-warning" ng-if="error.size">{{_('The file is too large. Max upload size is %d Mb', maxUploadMb)}}<button type="button" class="close" ng-click="error.size = null"><span>&times;</span></button></div>
+	<p ng-if="!imgData">{{_('Please choose a picture to upload, max %d Mb', maxUploadMb)}}</p>
+	<p ng-if="imgData">{{_('Upload a different picture')}}</p>
 	<div><input id="uploadFile" type="file"></div>
 	<div ng-if="upload.status != 100 && upload.status != 0">
 		<br>