203 lines
7.3 KiB
HTML
203 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
|
|
|
|
<head>
|
|
<title>LoopBack Storage Service Demo</title>
|
|
<link rel="stylesheet"
|
|
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
|
|
|
|
<!-- Fix for old browsers -->
|
|
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
|
|
|
|
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
|
|
|
|
<!--<script src="../bower_components/angular/angular.js"></script>-->
|
|
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
|
|
<script src="angular-file-upload.js"></script>
|
|
<script src="controllers.js"></script>
|
|
|
|
<style>
|
|
.my-drop-zone {
|
|
border: dotted 3px lightgray;
|
|
}
|
|
|
|
.ng-file-over {
|
|
border: dotted 3px red;
|
|
}
|
|
|
|
/* Default class applied to drop zones on over */
|
|
.another-file-over-class {
|
|
border: dotted 3px green;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<!-- 1. ng-file-drop | ng-file-drop="options" -->
|
|
<body ng-controller="TestController" ng-file-drop>
|
|
|
|
<div class="container">
|
|
|
|
<div class="navbar navbar-default">
|
|
<div class="navbar-header">
|
|
<a class="navbar-brand"
|
|
href="https://github.com/strongloop/loopback-component-storage">LoopBack
|
|
Storage Service</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-3">
|
|
|
|
<h3>Select files</h3>
|
|
|
|
<div ng-show="uploader.isHTML5">
|
|
<!-- 3. ng-file-over | ng-file-over="className" -->
|
|
<div class="well my-drop-zone" ng-file-over>
|
|
Base drop zone
|
|
</div>
|
|
|
|
<!-- Example: ng-file-drop | ng-file-drop="options" -->
|
|
<div class="well my-drop-zone" ng-file-drop="{ url: '/foo' }"
|
|
ng-file-over="another-file-over-class">
|
|
Another drop zone with its own settings
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. ng-file-select | ng-file-select="options" -->
|
|
Multiple
|
|
<input ng-file-select type="file" multiple/><br/>
|
|
|
|
Single
|
|
<input ng-file-select type="file"/>
|
|
</div>
|
|
|
|
<div class="col-md-9" style="margin-bottom: 40px">
|
|
|
|
<h3>Upload queue</h3>
|
|
|
|
<p>Queue length: {{ uploader.queue.length }}</p>
|
|
|
|
<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" style="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>
|
|
<p>
|
|
Queue progress:
|
|
|
|
<div class="progress" style="">
|
|
<div class="progress-bar" role="progressbar"
|
|
ng-style="{ 'width': uploader.progress + '%' }"></div>
|
|
</div>
|
|
</p>
|
|
<button type="button" class="btn btn-success 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-warning 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-danger btn-s"
|
|
ng-click="uploader.clearQueue()"
|
|
ng-disabled="!uploader.queue.length">
|
|
<span class="glyphicon glyphicon-trash"></span> Remove all
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-9" style="margin-bottom: 40px"
|
|
ng-controller="FilesController" data-ng-init="load()">
|
|
|
|
<h3>Files in the container</h3>
|
|
|
|
<table class="table">
|
|
|
|
<tbody>
|
|
<tr ng-repeat="file in files">
|
|
<td>
|
|
<a href="/api/containers/container1/download/{{file.name}}"><strong>{{
|
|
file.name }}</strong></a></td>
|
|
<td>
|
|
<td>
|
|
<button type="button" class="btn btn-danger btn-xs"
|
|
ng-click="delete($index, file.name)"
|
|
title="Delete the file">
|
|
<span class="glyphicon glyphicon-trash"></span>
|
|
Remove
|
|
</button>
|
|
|
|
</td>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|