Add basic progressbar to public upload page

Signed-off-by: Christopher Mueller <chrinimue@posteo.me>
This commit is contained in:
Christopher Mueller 2020-03-31 10:56:59 +00:00
parent dc9df2b7ab
commit b69d76feee
4 changed files with 9 additions and 3 deletions

View File

@ -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;

View File

@ -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);
}
}
});

View File

@ -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}}

View File

@ -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>