Introduction
This article demonstrates learning MVC using Angular File Upload and Bootstrap Filestyle in Visual Studio 2017.
Angular File Upload
Angular File Upload supports native Html5 uploads. It works with any server side platform which supports standard HTML form uploads. When a file is added to the queue, it creates a file item and uploader options are into this object. After, the items in the queue are ready for uploading.
Features
- Drag-n-drop upload.
- Upload progress.
- Validation file filter.
- File upload queue.
Below are the steps that allow you to use Angular File Upload in Angular JS and MVC.
- Create an MVC Project.
- Configure Angular File Upload and Bootstrap Filestyle.
- Work in Angular File Upload.
Create an MVC Project
Open Visual Studio 2017.
Go to New menu >Click New and Project. Now it will open the New Project Window.
You can select ASP.NET Web Application on Framework 4.5. Enter the name of the project in tje “Solution name” text box and then click OK.
One more window should appear. Select MVC Template in this pop-up and click OK. Now start cropping your image.
Configure Angular File Upload and Bootstrap Filestyle
Right click on the project and go to the NuGet package manager. Then search ‘angularfileupload’ in the Browse tab and install it.
OR you can download the plugins from here:
Open the _Layout.cshtml and refer the.js file from the downloaded folder to this view page.
<script src="~/Plugin/angular/angular.min.js"></script>
<script src="~/Plugin/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="~/Plugin/angular-file-upload/dist/angular-file-upload.min.js"></script>
<script src="~/Plugin/bootstrap-filestyle/src/bootstrap-filestyle.js"></script>
Link your Angular configurable file here, using whatever name you gave it.
<script src="~/App/App.module.js"></script> <script src="~/App/App.config.js"></script> <script src="~/App/IUController.js"></script>
Angular Module
You will need to include the module as a dependency in your application.
var uiroute = angular.module('uiroute', ['ui.router','angularFileUpload']);
Work in Angular Image Upload
Using a Bootstrap Filestyle directive, create a single uploading attribute.
<input filestyle="" type="file" data-icon-name="icon-upload" data-button-text="Single" data-class-button="btn btn-default" data-classinput="form-control inline" nv-file-select="" uploader="uploader" class="form-control" />
HTML Code
<div ng-controller="FileUploadController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel">
<div class="panel-body">
<h4 class="page-header mt0">Select files</h4>
<div ng-show="uploader.isHTML5">
<!-- 3. nv-file-over uploader="link" over-class="className"-->
<div nv-file-over="" uploader="uploader" over-class="bg-info" class="box-placeholder my-drop-zone">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="bg-purple" class="box-placeholder my-drop-zone">Another drop zone with its own settings</div>
</div>
</div>
<!-- Example: nv-file-select="" uploader="{Object}" options="{Object}" filters="{String}"-->
<hr />
<input filestyle="" type="file" data-icon-name="icon-upload" data-button-text="Multiple" data-class-button="btn btn-default" data-class-input="form-control inline" nv-file-select="" uploader="uploader" multiple="" class="form-control" />
<br />
<input filestyle="" type="file" data-icon-name="icon-upload" data-button-text="Single" data-class-button="btn btn-default" data-classinput="form-control inline" nv-file-select="" uploader="uploader" class="form-control" />
</div>
</div>
</div>
<div style="margin-bottom: 40px" class="col-md-9">
<div class="panel">
<div class="panel-body">
<p ng-if="uploader.queue.length" class="pull-right label label-info">Queue length: {{ uploader.queue.length }}</p>
<h4 class="page-header mt0">Upload queue</h4>
<p ng-if="!uploader.queue.length" class="lead text-center">No files in queue. Start adding some..</p>
<div ng-if="uploader.queue.length">
<table ng-if="uploader.queue.length" 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 style="margin-bottom: 0;" class="progress progress-xs">
<div role="progressbar" ng-style="{ 'width': item.progress + '%' }" class="progress-bar"></div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess">
<em class="fa fa-check fa-fw"></em>
</span>
<span ng-show="item.isCancel">
<em class="fa fa-ban-circle fa-fw"></em>
</span>
<span ng-show="item.isError">
<em class="fa fa-times fa-fw"></em>
</span>
</td>
<td nowrap="">
<button type="button" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess" class="btn btn-info btn-xs">
<span class="icon-cloud-upload mr"></span>Upload
</button>
<button type="button" ng-click="item.cancel()" ng-disabled="!item.isUploading" class="btn btn-warning btn-xs">
<span class="icon-cross mr"></span>Cancel
</button>
<button type="button" ng-click="item.remove()" class="btn btn-danger btn-xs">
<span class="icon-trash mr"></span>Remove
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel">
<div class="panel-body">
<div>
<p>Queue progress:</p>
<div style="" class="progress progress-xs">
<div role="progressbar" ng-style="{ 'width': uploader.progress + '%' }" class="progress-bar"></div>
</div>
</div>
<button type="button" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length" class="btn btn-info btn-s">
<span class="icon-cloud-upload mr"></span>Upload all
</button>
<button type="button" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading" class="btn btn-warning btn-s">
<span class="icon-cross mr"></span>Cancel all
</button>
<button type="button" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length" class="btn btn-danger btn-s">
<span class="icon-trash mr"></span>Remove all
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Angular Controller
Initiate the Fileuploader as an object. This object will load the predefined function.
function FileUploadController(FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: 'server call'
});
uploader.filters.push({
name: 'customFilter',
fn: function (item, options) {
return this.queue.length < 10;
}
});
uploader.onWhenAddingFileFailed = function (item, 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);
Angular Directive
You can use Bootstrap Filestyle as an Angular directive. When you select the image using Filestyle, set the element using the <img-crop> directive.
directive('filestyle', filestyle);
functionfilestyle () {
controller.$inject = ['$scope', '$element'];
return {
restrict: 'A',
controller: controller
};
function controller($scope, $element) {
var options = $element.data();
options.classInput = $element.data('classinput') || options.classInput;
$element.filestyle(options);
}
}
Click the F5 button and run the application. Now it will appear in the browser and you can see the result.
Output 1
When you selected or dropped one or more filters into the component, and these filters are then applied. Files which pass all filters are added to the queue.
Output 2
This creates instance uploaders which are copied into the object.
Output 3
Image queue is ready to upload the selected image.
Conclusion
In this article, we have learned about MVC using Angular File Upload and Bootstrap File Style. If you have any queries, please tell me through the comments section, because your comments are very valuable.
Happy Coding!