zuel-itsm-3.0.2/assets/views/form_file_upload.html

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