Merge pull request #20244 from CHRINIMUE/add-progress-bar-to-public-upload
Add basic progressbar to public upload page
This commit is contained in:
Roeland Jago Douma
GitHub
commit
a8452b236b
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
})();
|
||||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue