From b69d76feeedc27a5753ccb6363f666ba9ec121aa Mon Sep 17 00:00:00 2001
From: Christopher Mueller <chrinimue@posteo.me>
Date: Tue, 31 Mar 2020 10:56:59 +0000
Subject: [PATCH] Add basic progressbar to public upload page

Signed-off-by: Christopher Mueller <chrinimue@posteo.me>
---
 apps/files_sharing/css/public.scss                    | 4 ++++
 apps/files_sharing/js/files_drop.js                   | 2 ++
 apps/files_sharing/js/templates/files_drop.handlebars | 3 ++-
 apps/files_sharing/templates/public.php               | 3 +--
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index a8207167c2..366bc5f5e3 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -161,6 +161,10 @@ thead {
 	margin-right: 7px;
 }
 
+#drop-uploaded-files li #drop-upload-progress-bar {
+	margin-top: 7px;
+}
+
 .disclaimer,
 .note {
 	margin: 0 auto 30px;
diff --git a/apps/files_sharing/js/files_drop.js b/apps/files_sharing/js/files_drop.js
index 26bb04a001..c3af5c2206 100644
--- a/apps/files_sharing/js/files_drop.js
+++ b/apps/files_sharing/js/files_drop.js
@@ -120,9 +120,11 @@
 					if(progress === 100) {
 						$('#drop-upload-done-indicator').removeClass('hidden');
 						$('#drop-upload-progress-indicator').addClass('hidden');
+						$('#drop-upload-progress-bar').val(100);
 					} else {
 						$('#drop-upload-done-indicator').addClass('hidden');
 						$('#drop-upload-progress-indicator').removeClass('hidden');
+						$('#drop-upload-progress-bar').val(progress);
 					}
 				}
 			});
diff --git a/apps/files_sharing/js/templates/files_drop.handlebars b/apps/files_sharing/js/templates/files_drop.handlebars
index b090e82979..d4cc3e85b9 100644
--- a/apps/files_sharing/js/templates/files_drop.handlebars
+++ b/apps/files_sharing/js/templates/files_drop.handlebars
@@ -1,6 +1,7 @@
 <li data-toggle="tooltip" title="{{name}}" data-name="{{name}}">
 	{{#if isUploading}}
-		<span class="icon-loading-small"></span> {{name}}
+		<small>{{name}}</small><a id="status"></a>
+		<progress id="drop-upload-progress-bar" value="0" max="100"></progress>	
 	{{else}}
 		<img src="{{iconSrc}}"/> {{name}}
 	{{/if}}
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index a9cfaae9df..e029279535 100644
--- a/apps/files_sharing/templates/public.php
+++ b/apps/files_sharing/templates/public.php
@@ -98,9 +98,8 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 			<?php } ?>
 
 			<input type="file" name="files[]" class="hidden" multiple>
-
 			<a href="#" class="button icon-upload"><?php p($l->t('Select or drop files')) ?></a>
-			<div id="drop-upload-progress-indicator" style="padding-top: 25px;" class="hidden"><?php p($l->t('Uploading files…')) ?></div>
+			<div id="drop-upload-progress-indicator" style="padding-top: 25px;" class="hidden"><?php p($l->t('Uploading files')) ?></div>
 			<div id="drop-upload-done-indicator" style="padding-top: 25px;" class="hidden"><?php p($l->t('Uploaded files:')) ?></div>
 			<ul id="drop-uploaded-files"></ul>