Merge pull request #20244 from CHRINIMUE/add-progress-bar-to-public-upload

Add basic progressbar to public upload page

apps/files_sharing/css/public.scss

@@ -138,8 +138,8 @@ thead {
 }
 
 #public-upload #emptycontent ul {
-	width: 160px;
-	margin: 5px auto;
+	width: 230px;
+	margin: 5px auto 5vh;
 	text-align: left;
 }
 
@@ -156,11 +156,23 @@ thead {
 	top: 2px;
 }
 
-#public-upload li span.icon-loading-small {
+#drop-upload-progress-indicator span.icon-loading-small {
 	padding-left: 18px;
 	margin-right: 7px;
 }
 
+#drop-uploaded-files li #drop-upload-name {
+	float: left;
+	max-width: 180px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+#drop-uploaded-files li #drop-upload-status {
+	float: right;
+}
+
 .disclaimer,
 .note {
 	margin: 0 auto 30px;

apps/files_sharing/js/files_drop.js

@@ -95,6 +95,7 @@
 				},
 				add: function(e, data) {
 					Drop.addFileToUpload(e, data);
+					$('#drop-upload-status').text(t('files_sharing', 'waiting...'));
 					//we return true to keep trying to upload next file even
 					//if addFileToUpload did not like the privious one
 					return true;
@@ -111,6 +112,7 @@
 							'Could not upload "{filename}"',
 							{filename: data.files[0].name}
 							));
+					$('#drop-upload-status').text(t('files_sharing', 'error'));
 					var errorIconSrc = OC.imagePath('core', 'actions/error.svg');
 					var fileItem = output({isUploading: false, iconSrc: errorIconSrc, name: data.files[0].name});
 					Drop.updateFileItem(data.files[0].name, fileItem);
@@ -124,7 +126,17 @@
 						$('#drop-upload-done-indicator').addClass('hidden');
 						$('#drop-upload-progress-indicator').removeClass('hidden');
 					}
+				},
+				progress: function (e, data) {
+					var progress = parseInt(data.loaded / data.total * 100, 10);
+					if(progress === 100) {
+						$('#drop-upload-progress-bar').val(100);
+						$('#drop-upload-status').text(t('files_sharing', 'finished'));
+					} else {
+						$('#drop-upload-progress-bar').val(progress);
+						$('#drop-upload-status').text(progress + '%');
 					}
+				},
 			});
 			$('#public-upload .button.icon-upload').click(function(e) {
 				e.preventDefault();

apps/files_sharing/js/templates.js

@@ -8,9 +8,9 @@ templates['files_drop'] = template({"1":function(container,depth0,helpers,partia
         return undefined
     };
 
-  return "		<span class=\"icon-loading-small\"></span> "
-    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data,"loc":{"start":{"line":3,"column":43},"end":{"line":3,"column":51}}}) : helper)))
-    + "\n";
+  return "		<div id=\"drop-upload-name\">"
+    + container.escapeExpression(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : container.hooks.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data,"loc":{"start":{"line":3,"column":29},"end":{"line":3,"column":37}}}) : helper)))
+    + "</div><div id=\"drop-upload-status\"></div>\n		<progress id=\"drop-upload-progress-bar\" value=\"0\" max=\"100\"></progress>	\n";
 },"3":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
         if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
@@ -20,9 +20,9 @@ templates['files_drop'] = template({"1":function(container,depth0,helpers,partia
     };
 
   return "		<img src=\""
-    + alias4(((helper = (helper = lookupProperty(helpers,"iconSrc") || (depth0 != null ? lookupProperty(depth0,"iconSrc") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconSrc","hash":{},"data":data,"loc":{"start":{"line":5,"column":12},"end":{"line":5,"column":23}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"iconSrc") || (depth0 != null ? lookupProperty(depth0,"iconSrc") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconSrc","hash":{},"data":data,"loc":{"start":{"line":6,"column":12},"end":{"line":6,"column":23}}}) : helper)))
     + "\"/> "
-    + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":5,"column":27},"end":{"line":5,"column":35}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":6,"column":27},"end":{"line":6,"column":35}}}) : helper)))
     + "\n";
 },"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=container.hooks.helperMissing, alias3="function", alias4=container.escapeExpression, lookupProperty = container.lookupProperty || function(parent, propertyName) {
@@ -37,7 +37,7 @@ templates['files_drop'] = template({"1":function(container,depth0,helpers,partia
     + "\" data-name=\""
     + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":1,"column":54},"end":{"line":1,"column":62}}}) : helper)))
     + "\">\n"
-    + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"isUploading") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":2,"column":1},"end":{"line":6,"column":8}}})) != null ? stack1 : "")
+    + ((stack1 = lookupProperty(helpers,"if").call(alias1,(depth0 != null ? lookupProperty(depth0,"isUploading") : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data,"loc":{"start":{"line":2,"column":1},"end":{"line":7,"column":8}}})) != null ? stack1 : "")
     + "</li>\n";
 },"useData":true});
 })();

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}}
+		<div id="drop-upload-name">{{name}}</div><div id="drop-upload-status"></div>
+		<progress id="drop-upload-progress-bar" value="0" max="100"></progress>	
 	{{else}}
 		<img src="{{iconSrc}}"/> {{name}}
 	{{/if}}

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"><span class="icon-loading-small"></span><?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>