222 lines
10 KiB
HTML
Executable File
222 lines
10 KiB
HTML
Executable File
<!-- start: PAGE TITLE -->
|
|
<section id="page-title">
|
|
<div class="row">
|
|
<div class="col-sm-8">
|
|
<h1 class="mainTitle" translate="sidebar.nav.forms.UPLOAD">{{ mainTitle }}</h1>
|
|
<span class="mainDescription">Angular File Upload supports drag-n-drop upload, upload progress, validation filters and a file upload queue.</span>
|
|
</div>
|
|
<div ncy-breadcrumb></div>
|
|
</div>
|
|
</section>
|
|
<!-- end: PAGE TITLE -->
|
|
<!-- start: UPLOADS ONLY IMAGES -->
|
|
<div class="container-fluid container-fullw bg-white">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5 class="over-title margin-bottom-15">Uploads <span class="text-bold">only images</span></h5>
|
|
<p>
|
|
with canvas preview
|
|
</p>
|
|
<!-- /// controller: 'UploadCtrl' - localtion: assets/js/controllers/uploadCtrl.js /// -->
|
|
<div ng-controller="UploadCtrl" nv-file-drop="" uploader="uploaderImages">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<h5>Select files</h5>
|
|
<div class="panel panel-white">
|
|
<div class="panel-body">
|
|
<div ng-show="uploaderImages.isHTML5">
|
|
<!-- 3. nv-file-over uploader="link" over-class="className" -->
|
|
<div class="well my-drop-zone" nv-file-over="" uploader="uploaderImages">
|
|
Base drop zone
|
|
</div>
|
|
<!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
|
|
<div nv-file-drop="" uploader="uploaderImages" options="{ url: '/foo' }">
|
|
<div nv-file-over="" uploader="uploaderImages" over-class="another-file-over-class" class="well my-drop-zone">
|
|
Another drop zone with its own settings
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
|
|
<span class="btn btn-primary btn-o btn-file"> Select an image file
|
|
<input type="file" nv-file-select="" uploader="uploaderImages" multiple />
|
|
</span>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9 file-upload" style="margin-bottom: 40px">
|
|
<h4>The queue</h4>
|
|
<p>
|
|
Queue length: {{ uploaderImages.queue.length }}
|
|
</p>
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Name</th>
|
|
<th ng-show="uploaderImages.isHTML5">Size</th>
|
|
<th ng-show="uploaderImages.isHTML5">Progress</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="item in uploaderImages.queue">
|
|
<td><strong>{{ item.file.name }}</strong>
|
|
<!-- Image preview -->
|
|
<!--auto height-->
|
|
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
|
|
<!--auto width-->
|
|
<div ng-show="uploaderImages.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
|
|
<!--fixed width and height -->
|
|
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
|
|
</td>
|
|
<td ng-show="uploaderImages.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
|
|
<td ng-show="uploaderImages.isHTML5">
|
|
<div class="progress progress-xs margin-bottom-0">
|
|
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
|
|
</div></td>
|
|
<td class="text-center"><span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span><span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span><span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span></td>
|
|
<td nowrap>
|
|
<button type="button" class="btn btn-primary btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
|
|
<span class="glyphicon glyphicon-upload"></span> Upload
|
|
</button>
|
|
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
|
|
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
|
|
<span class="glyphicon glyphicon-trash"></span> Remove
|
|
</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
Queue progress:
|
|
<div class="progress progress-xs margin-top-5 margin-bottom-20">
|
|
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploaderImages.progress + '%' }"></div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-primary btn-s" ng-click="uploaderImages.uploadAll()" ng-disabled="!uploaderImages.getNotUploadedItems().length">
|
|
<span class="glyphicon glyphicon-upload"></span> Upload all
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-o btn-s" ng-click="uploaderImages.cancelAll()" ng-disabled="!uploaderImages.isUploading">
|
|
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-o btn-s" ng-click="uploaderImages.clearQueue()" ng-disabled="!uploaderImages.queue.length">
|
|
<span class="glyphicon glyphicon-trash"></span> Remove all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: UPLOADS ONLY IMAGES -->
|
|
<!-- start: UPLOADS ALL FILES -->
|
|
<div class="container-fluid container-fullw">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5 class="over-title margin-bottom-15">Uploads <span class="text-bold">all files</span></h5>
|
|
<p>
|
|
without canvas preview
|
|
</p>
|
|
<!-- /// controller: 'UploadCtrl2' - localtion: assets/js/controllers/uploadCtrl.js /// -->
|
|
<div ng-controller="UploadCtrl2" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<h5>Select files</h5>
|
|
<div class="panel panel-white">
|
|
<div class="panel-body">
|
|
<div ng-show="uploader.isHTML5">
|
|
<!-- 3. nv-file-over uploader="link" over-class="className" -->
|
|
<div class="well my-drop-zone" nv-file-over="" uploader="uploader">
|
|
Base drop zone
|
|
</div>
|
|
<!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
|
|
<div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
|
|
<div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone">
|
|
Another drop zone with its own settings
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
|
|
<span class="btn btn-primary btn-o btn-file margin-bottom-15"> Select multiple files
|
|
<input type="file" nv-file-select="" uploader="uploader" multiple />
|
|
</span>
|
|
<br/>
|
|
<span class="btn btn-primary btn-o btn-file"> Select single file
|
|
<input type="file" nv-file-select="" uploader="uploader" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-9" style="margin-bottom: 40px">
|
|
<h4>Upload queue</h4>
|
|
<div class="panel panel-transparent">
|
|
<div class="panel-body">
|
|
<p>
|
|
Queue length: {{ uploader.queue.length }}
|
|
</p>
|
|
<div class="table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="50%">Name</th>
|
|
<th ng-show="uploader.isHTML5">Size</th>
|
|
<th ng-show="uploader.isHTML5">Progress</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="item in uploader.queue">
|
|
<td><strong>{{ item.file.name }}</strong></td>
|
|
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
|
|
<td ng-show="uploader.isHTML5">
|
|
<div class="progress progress-xs margin-bottom-0">
|
|
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
|
|
</div></td>
|
|
<td class="text-center"><span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span><span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span><span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span></td>
|
|
<td nowrap>
|
|
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
|
|
<span class="glyphicon glyphicon-upload"></span> Upload
|
|
</button>
|
|
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
|
|
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
|
|
<span class="glyphicon glyphicon-trash"></span> Remove
|
|
</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
Queue progress:
|
|
<div class="progress progress-xs margin-top-5 margin-bottom-20">
|
|
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-primary btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
|
|
<span class="glyphicon glyphicon-upload"></span> Upload all
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-o btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
|
|
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-o btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
|
|
<span class="glyphicon glyphicon-trash"></span> Remove all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end: UPLOADS ALL FILES --> |