<!DOCTYPE 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>