Upload progress bar now displays informations about uploades size (12kB of 3MB) and the current speed.

3 files changed, 45 insertions, 5 deletions

diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css
index bdc258b5064..1b572963ff3 100644
--- a/apps/files/css/upload.css
+++ b/apps/files/css/upload.css
@@ -59,11 +59,44 @@
 	width: 200px;
 	height: 36px;
 	display:inline-block;
+    text-align: center;
+}
+#uploadprogressbar .ui-progressbar-value.ui-widget-header.ui-corner-left {
+    height: 100%;
+    top: 0px;
+    left: 0px;
+    position: absolute;
+    overflow: hidden;
+}
+#uploadprogressbar .label {
+    font-weight: bold;
+    top: 6px;
+    opacity: 1;
+}
+#uploadprogressbar .label.inner {
+    color:white; 
+    position: absolute;
+    display: block;
+    width: 200px;
+}
+#uploadprogressbar .label.outer {
+    position: relative;
+    color: black;
+}
+#uploadprogresswrapper .percents{
+    margin-left: 3px;
+    font-size: 13px;
+    display:inline-block;
+    float: left;
+    width: 5em;
+    text-align: center;
+    position: relative;
+    top: 7px;
 }
+
 #uploadprogressbar + stop {
 	font-size: 13px;
 }
-
 .oc-dialog .fileexists table {
 	width: 100%;
 }
diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js
index 2637d13f9ba..36bdc589745 100644
--- a/apps/files/js/file-upload.js
+++ b/apps/files/js/file-upload.js
@@ -181,6 +181,7 @@ OC.Upload = {
 
 	_hideProgressBar: function() {
 		$('#uploadprogresswrapper input.stop').fadeOut();
+		$('#uploadprogresswrapper .percents').fadeOut();
 		$('#uploadprogressbar').fadeOut(function() {
 			$('#file_upload_start').trigger(new $.Event('resized'));
 		});
@@ -454,7 +455,10 @@ OC.Upload = {
 				fileupload.on('fileuploadstart', function(e, data) {
 					OC.Upload.log('progress handle fileuploadstart', e, data);
 					$('#uploadprogresswrapper input.stop').show();
+					$('#uploadprogresswrapper .percents').show();
+					$('#uploadprogresswrapper .label').show();
 					$('#uploadprogressbar').progressbar({value: 0});
+					$('#uploadprogressbar .ui-progressbar-value').html('<em class="label inner">Uploading...</em>');
 					OC.Upload._showProgressBar();
 				});
 				fileupload.on('fileuploadprogress', function(e, data) {
@@ -464,11 +468,12 @@ OC.Upload = {
 				fileupload.on('fileuploadprogressall', function(e, data) {
 					OC.Upload.log('progress handle fileuploadprogressall', e, data);
 					var progress = (data.loaded / data.total) * 100;
+					$('#uploadprogressbar .label').text(humanFileSize(data.loaded)  + " of " + humanFileSize(data.total));
+					$('#uploadprogresswrapper .percents').text(humanFileSize(data.bitrate) + '/s')
 					$('#uploadprogressbar').progressbar('value', progress);
 				});
 				fileupload.on('fileuploadstop', function(e, data) {
 					OC.Upload.log('progress handle fileuploadstop', e, data);
-
 					OC.Upload._hideProgressBar();
 				});
 				fileupload.on('fileuploadfail', function(e, data) {
diff --git a/apps/files/templates/list.php b/apps/files/templates/list.php
index a0138967cd2..a25172679a2 100644
--- a/apps/files/templates/list.php
+++ b/apps/files/templates/list.php
@@ -37,9 +37,11 @@
 					<a href="#" class="svg icon-upload"></a>
 			</div>
 			<div id="uploadprogresswrapper">
-				<div id="uploadprogressbar"></div>
-				<input type="button" class="stop icon-close"
-					style="display:none" value="" />
+				<div id="uploadprogressbar">
+					<em class="label outer" style="display:none">Uploading...</em>
+				</div>
+				<div style="display:none" class="percents"></div>
+             <input type="button" class="stop icon-close" style="display:none" value="" />
 			</div>
 		</div>
 		<div id="file_action_panel"></div>