<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
File Upload
<small>angularjs file upload
</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="#/dashboard.html">Home
</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="#/file_upload.html">File Upload
</a>
</li>
</ul>
<div class="page-toolbar">
<div class="btn-group pull-right">
<button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" dropdown-menu-hover data-delay="1000" data-close-others="true">
Actions
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User
</a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event
<span class="badge badge-success">4
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders
<span class="badge badge-danger">4
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users
<span class="badge badge-warning">12
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN MAIN CONTENT -->
<div class="note note-success">
<h3>Angular File Upload
</h3>
<p>
Angular File Upload is a module for the AngularJS framework. Supports drag-n-drop upload, upload progress, validation filters and a file upload queue. It supports native HTML5 uploads, but degrades to a legacy iframe upload method for older browsers. Works with any server side platform which supports standard HTML form uploads.
</p>
<p><span class="label label-danger">File upload is disabled in the demo only!
</span></p>
<p>
For more info please check the
<a href="https://github.com/nervgh/angular-file-upload">official github page
</a>
</p>
</div>
<div class="row" ng-controller="FileUploadCtrl" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="col-md-4">
<!-- BEGIN: ACCORDION DEMO -->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-green-sharp">
<i class="icon-settings font-green-sharp"></i>
<span class="caption-subject bold uppercase">Select files
</span>
<span class="caption-helper hide"></span>
</div>
<div class="actions">
<a class="btn btn-circle btn-icon-only btn-default" href="#">
<i class="icon-cloud-upload"></i>
</a>
<a class="btn btn-circle btn-icon-only btn-default" href="#">
<i class="icon-wrench"></i>
</a>
</div>
</div>
<div class="portlet-body">
<div ng-show="uploader.isHTML5">
<!-- 3. nv-file-over uploader="link" over-class="className" -->
<div class="file-drop-zone margin-bottom-20" nv-file-over="" uploader="uploader" over-class="file-drop-zone-over">
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="file-drop-zone-over" class="file-drop-zone margin-bottom-20">
Another drop zone with its own settings
</div>
</div>
</div>
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}" -->
Multiple
<input type="file" nv-file-select="" uploader="uploader" multiple /><br/>
Single
<input type="file" nv-file-select="" uploader="uploader" />
</div>
</div>
<!-- END: ACCORDION DEMO -->
</div>
<div class="col-md-8">
<!-- BEGIN: ACCORDION DEMO -->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-green-sharp">
<i class="icon-settings font-green-sharp"></i>
<span class="caption-subject bold uppercase">Upload queue
</span>
<span class="caption-helper">Queue length: {{ uploader.queue.length }}
</span>
</div>
<div class="actions">
<div class="btn-group">
<a class="btn btn-circle btn-default btn-sm" href="#" data-toggle="dropdown">
<i class="fa fa-cogs"></i> Settings
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
<i class="fa fa-pencil"></i> Edit
</a>
</li>
<li>
<a href="#">
<i class="fa fa-trash-o"></i> Delete
</a>
</li>
<li>
<a href="#">
<i class="fa fa-ban"></i> Ban
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="i"></i> Make admin
</a>
</li>
</ul>
</div>
<a class="btn btn-circle btn-icon-only btn-default fullscreen" href="#" data-original-title="" title="">
</a>
</div>
</div>
<div class="portlet-body">
<div class="table-scrollable table-scrollable-borderless">
<table class="table table-hover table-light">
<thead>
<tr class="uppercase">
<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-sm" style="margin-bottom: 0;">
<div class="progress-bar progress-bar-info" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess" class="text-success"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel" class="text-info"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError" class="text-danger"><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>
<p>Queue progress:
</p>
<div class="progress progress-sm" style="">
<div class="progress-bar progress-bar-info" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<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>
<!-- END: ACCORDION DEMO -->
</div>
</div>
<!-- END MAIN CONTENT -->
<!-- BEGIN MAIN JS-->
<script>
function FileUploadCtrl($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: '../../../assets/global/plugins/angularjs/plugins/angular-file-upload/upload.php'
});
// FILTERS
uploader.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/ , options) {
return this.queue.length
< 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/ , filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
};
</script>
<!-- BEGIN MAIN JS -->