From c6d6d6f6e4c9c0755d4058b442fb83a251110ecc Mon Sep 17 00:00:00 2001
From: Evan Theurer <theurer@struktur.de>
Date: Wed, 20 Aug 2014 10:32:58 +0200
Subject: [PATCH] Add file upload progress visual.

---
 static/js/directives/buddypictureupload.js | 21 +++++++++++++++++++--
 static/partials/buddypictureupload.html    |  4 ++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/static/js/directives/buddypictureupload.js b/static/js/directives/buddypictureupload.js
index 5a2f3d89..1280ac33 100644
--- a/static/js/directives/buddypictureupload.js
+++ b/static/js/directives/buddypictureupload.js
@@ -25,8 +25,6 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 
 		var controller = ['$scope', 'safeApply', '$timeout', '$q', 'translation', function($scope, safeApply, $timeout, $q, translation) {
 
-			var previewWidth = 205;
-			var previewHeight = 205;
 			$scope.showUploadPicture = false;
 			$scope.previewUpload = false;
 			$scope.imgData = null;
@@ -39,6 +37,18 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 				initial: 'Please choose a picture to upload',
 				again: 'Upload a different picture'
 			};
+			$scope.upload = {
+				status: 0
+			};
+			var previewWidth = 205;
+			var previewHeight = 205;
+
+			var completedUpload = function() {
+				$scope.upload.status = 99;
+				$timeout(function() {
+					$scope.upload.status = 100;
+				}, 500);
+			};
 
 			var setUploadImageDimension = function(data) {
 				$scope.prevImage.onload = function() {
@@ -50,6 +60,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 					this.style.height = dim.height + 'px';
 					this.style.top = '0px';
 					this.style.left = '0px';
+					completedUpload();
 					safeApply($scope);
 				};
 				$scope.prevImage.src = data;
@@ -66,9 +77,15 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
 					return;
 				}
 				console.log('file', file);
+				$scope.$apply(function(scope) {
+					$scope.upload.status = 5;
+				});
 
 				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);
diff --git a/static/partials/buddypictureupload.html b/static/partials/buddypictureupload.html
index 3e49b54d..e289d497 100644
--- a/static/partials/buddypictureupload.html
+++ b/static/partials/buddypictureupload.html
@@ -20,6 +20,10 @@
 	<p ng-if="!previewUpload">{{text.initial}}</p>
 	<p ng-if="previewUpload">{{text.again}}</p>
 	<div><input id="uploadFile" type="file"></div>
+	<div ng-if="upload.status != 100 && upload.status != 0">
+		<br>
+		<progressbar class="progress-striped active" value="upload.status"><i>{{upload.status | number:0}}%</i></progressbar>
+	</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>