angular-file-upload
Version:
Angular File Upload is a module for the AngularJS framework
93 lines (83 loc) • 4.55 kB
HTML
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<title>Without bootstrap example</title>
<link rel="stylesheet" href="style.css" />
<!-- ES5 shim for old browsers -->
<script src="http://nervgh.github.io/js/es5-shim.min.js"></script>
<script src="http://nervgh.github.io/js/es5-sham.min.js"></script>
<!--<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>-->
<script src="../console-sham.js"></script>
<script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<script src="../../dist/angular-file-upload.min.js"></script>
<script src="controllers.js"></script>
<!--thumbnails for images-->
<script src="directives.js"></script>
</head>
<!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
<body ng-controller="AppController" nv-file-drop="" uploader="uploader">
<h1>Without bootstrap example</h1>
<h2>Examples</h2>
<ul>
<li><a href="../simple">Simple example</a></li>
<li><a href="../image-preview">Uploads only images (with canvas preview)</a></li>
<li><a href="#">Without bootstrap</a></li>
</ul>
<a href="https://github.com/nervgh/angular-file-upload">Download / Repository</a>
<br />
<br />
<!-- 3. nv-file-over uploader="link" over-class="className" -->
<div ng-show="uploader.isHTML5">
<div class="over-zone zone" nv-file-over="" uploader="uploader" style="float: left;">
Base drop zone indication
</div>
<!-- Example: ng-file-drop | ng-file-drop="options" -->
<div nv-file-drop="" nv-file-over="" uploader="uploader" options="{url: '/foo'}" over-class="other-over-zone" class="other-drop-zone zone" style="float: right;">
One more drop zone with its own settings (and indication)
</div>
<div style="clear: both;"></div>
</div>
<br />
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
<input type="file" nv-file-select="" uploader="uploader" multiple />
<h2>The queue. Length: {{ uploader.queue.length }}</h2>
<ul>
<li ng-repeat="item in uploader.queue">
<div>Name: {{ item.file.name }}</div>
<div>Size: {{ item.file.size/1024/1024|number:2 }} Mb</div>
<div ng-show="uploader.isHTML5">
Progress: {{ item.progress }}
<div class="item-progress-box">
<div class="item-progress" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</div>
<div ng-if="controller.isImage(item._file)">
Thumbnail (only images):
<!-- Image preview -->
<!--auto height-->
<!--<div ng-thumb="{ file: item.file, width: 100 }"></div>-->
<!--auto width-->
<div ng-thumb="{ file: item._file, height: 100 }"></div>
<!--fixed width and height -->
<!--<div ng-thumb="{ file: item.file, width: 100, height: 100 }"></div>-->
</div>
<div>
<button ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">Upload</button>
<button ng-click="item.cancel()" ng-disabled="!item.isUploading">Cancel</button>
<button ng-click="item.remove()">Remove</button>
</div>
</li>
</ul>
<div>
<div>
Total progress: {{ uploader.progress }}
<div class="total-progress-box">
<div class="total-progress" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">Upload all</button>
<button ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">Cancel all</button>
<button ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">Remove all</button>
</div>
</body>
</html>