kotti/templates/edit/upload.pt
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
xmlns:metal="http://xml.zope.org/namespaces/metal"
i18n:domain="Kotti"
metal:use-macro="api.macro('kotti:templates/view/master.pt')">
<div metal:fill-slot="content">
<div ng-app="kotti">
<h1 i18n:translate="">Upload content from local file(s)</h1>
<form id="uploader" ng-controller="UploadController" style="padding-top: 60px"
tal:define="upload_url request.resource_url(context, 'upload'); content_types_url request.resource_url(context, 'content_types')"
ng-init="endpoints={upload: '${upload_url}', content_types: '${content_types_url}'}">
<table class="table table-condensed table-hover">
<thead ng-show="(files.length > 0)">
<tr>
<th i18n:translate="">Filename</th>
<th i18n:translate="">Type</th>
<th i18n:translate="">Size</th>
<th i18n:translate="">Status</th>
<th i18n:translate="">Progress</th>
</tr>
</thead>
<tbody ng-show="(files.length > 0)">
<tr ng-repeat="f in files" ng-class="{'uploading': 'info', 'cancelled': 'warning', 'complete': 'success', 'failed': 'error'}[f.status]">
<td>
<a ng-href="{{f.url}}" ng-show="f.url">{{f.name}}</a>
<span ng-show="!f.url">{{f.name}}</span>
</td>
<td>
{{f.file.type}} <br>
<div class="btn-group" ng-show="f.status=='ready for upload'">
<div class="dropdown">
<button class="btn btn-xs btn-default dropdown-toggle" type="button" id="uploadType" data-toggle="dropdown">
Create as:
{{f.desiredType.title}}
<span class="caret" ng-show="f.allowedTypes.length>1"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="uploadType" ng-show="f.allowedTypes.length>1">
<li ng-repeat="t in f.allowedTypes" role="presentation">
<a role="menuitem" tabindex="-1" href="#" ng-click="f.desiredType=t">
<i class="icon-ok pull-right"
ng-show="t==f.desiredType"></i>
{{t.title}}
</a>
</li>
</ul>
</div>
</div>
</td>
<td class="col-md-2">{{f.size | bytes}}</td>
<td class="col-md-2">
<span class="label label-default"
ng-class="{
'label-info': f.status == 'uploading',
'label-warning': f.status == 'cancelled',
'label-important': f.status == 'failed',
'label-success': f.status == 'complete'}">{{f.status}}</span>
</td>
<td class="col-md-4">
<div class="progress"
ng-class="{'progress-striped': f.status == 'uploading'}">
<div class="progress-bar"
role="progressbar"
aria-valuenow="{{f.transfered.percent}}"
aria-valuemin="0"
aria-valuemax="100"
style="width: {{f.transfered.percent}}%"
ng-class="{
'progress-bar-info': f.status == 'uploading',
'progress-bar-danger': (f.status == 'cancelled') || (f.status == 'failed'),
'progress-bar-success': f.status == 'complete'}">
{{f.transfered.bytes | bytes}} / {{f.size | bytes}}
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="form-actions">
<div id="btn-select-files" class="btn btn-success">
<i class="icon-plus icon-white"></i>
<span tal:omit-tag="" i18n:translate="">
Select file(s) to upload...</span>
</div>
<a id="btn-upload-all" class="btn btn-primary"
ng-show="files.length > 0"
ng-class="{'disabled': num_files_waiting == 0}"
ng-click="uploadAll()">
<i class="icon-arrow-up icon-white"></i>
<span tal:omit-tag="" i18n:translate="">
Upload <span tal:omit-tag="" i18n:name="number">{{num_files_waiting}}</span> files.</span>
</a>
<a class="btn btn-danger pull-right" ng-show="errors.length > 0"
ng-click="errors=[]">
<span tal:omit-tag="" i18n:translate="">
Dismiss all errors</span>
</a>
</div>
<div class="alert alert-error alert-block" ng-repeat="f in errors">
<button type="button" class="close" ng-click="dismissError(f)">×</button>
<table class="table table condensed">
<thead>
<tr>
<th i18n:translate="">Filename</th>
<th i18n:translate="">Type</th>
<th i18n:translate="">Size</th>
<th>{{f.status}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{f.name}}</td>
<td>{{f.file.type}}</td>
<td>{{f.file.size | bytes}}</td>
<td>{{f.error}}</td>
</tr>
</tbody>
</table>
</div>
<!-- {{files | json}} -->
</form>
</div>
</div>
</html>