Over a million developers have joined DZone.

Learn MVC Using Angular Image Crop

DZone's Guide to

Learn MVC Using Angular Image Crop

Continue to hone your MVC skills with this tutorial, as we walk through the process of creating a web app using an Angular library and Bootstrap Filestyle.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.


This article demonstrates how to use MVC using Angular Image Crop and Bootstrap Filestyle in Visual Studio 2017.

Angular Image Crop

When you upload the image in Angular JS, this image crop directive helps to reduce the image size by using different area cutters.


  • Fix width/height in crop areaD.
  • Fix crop area square/circle.
  • Fix type of image format.
  • Fix image quality.

With the following steps, you can use Angular Image Crop in Angular JS in MVC.

  • Create an MVC Project.
  • Configure Angular Image Crop and Bootstrap Filestyle.
  • Work in Angular Image Crop.

Create MVC Project

Open the 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 the “Solution Name” text box, then click OK.


One more window should appear. Select the MVC Template in this popup and click OK. Now start cropping your image.

Configure Angular Image Crop and Bootstrap Filestyle

You can download the plugin from:

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/ng-img-crop/compile/unminified/ng-img-crop.js"></script>  
  <link href="~/Plugin/ng-img-crop/compile/unminified/ng-img-crop.css" rel="stylesheet" />  
  <script src="~/Plugin/bootstrap-filestyle/src/bootstrap-filestyle.js"></script>   

Link your Angular configurable file in this code. 

<script src="~/App/App.module.js"></script>  
<script src="~/App/App.config.js"></script>  
<script src="~/App/CIController.js"></script>   

Angular Module

You will need to include the module as a dependency of your application.

var uiroute = angular  
.module('uiroute', ['ui.router','ngImgCrop']);   

Work in Angular Image Crop

This tree control will work when you use the < img-crop > directive as HTML attributes.

<img-crop image="myImage"   

Using Bootstrap Filestyle directive:

<input id="fileInput" filestyle=""   
type="file" data-class-button="btn btn-default"   
data-button-text="Upload"  class="form-control" />   


<div ng-controller="CIController " class="container-fluid">  
    <div class="row">  
        <div class="col-md-3">  
            <div class="panel">  
                <div class="panel-heading no-shadow">  
                    <a href="" ng-click="reset()" class="pull-right">  
                        <small class="fa fa-refresh text-muted"></small>  
                    </a>Select an image file  
                <div class="panel-body">  
                    <div class="form-group">  
                        <input id="fileInput" filestyle="" type="file" data-class-button="btn btn-default" data-class-input="form-control" data-button-text="Upload"  class="form-control" />  
                    <p class="pv">Crop type:</p>  
                    <div class="btn-group btn-group-justified mb">  
                        <label ng-click="imgcropTypes('square')"  class="btn btn-default">Square</label>  
                        <label ng-click="imgcropTypes('circle')"  class="btn btn-default">Circle</label>  
                    <br />  
                    <div data-text="Cropped Image" class="imgcrop-preview">  
                        <img ng-src="{{myCroppedImage}}" />  
        <div class="col-md-9">  
            <div class="panel">  
                <div class="panel-body">  
                    <div class="imgcrop-area">  
                        <img-crop image="myImage"   

CSS Code

Set the style in the image crop area design.

.imgcrop-area {  
    width: 100%;  
    height: 410px;  
    overflow: hidden;  
    background: #e6e9ee;  

.imgcrop-preview {  
    position: relative;  
    width: 100%;  
    height: 200px;  
    margin: 0 auto;  
    background: #e6e9ee;  
    text-align: center;  

    .imgcrop-preview:after {  
        content: attr(data-text);  
        display: block;  
        position: absolute;  
        height: 50%;  
        text-align: center;  
        margin: auto;  
        top: 0;  
        left: 0;  
        bottom: 0;  
        right: 0;  
        z-index: 0;  
        color: #8394a9;  

    .imgcrop-preview > img {  
        position: relative;  
        z-index: 1;  
        max-width: 100%;  

Angular Controller

Initiate the crop area as “circle.”

$scope.reset = function () {  
            $scope.myImage = '';  
            $scope.myCroppedImage = '';  
            $scope.imgcropType = 'circle';  
        $scope.imgcropTypes = function (mode)  
            $scope.imgcropType = mode;  

Angular Directive

You can use Bootstrap Filestyle as an Angular directive. When you will select the image using filestyle, set the element to the <img-crop> directive.

.directive('filestyle', filestyle);  

    function filestyle() {  

        controller.$inject = ['$scope', '$element'];  
        return {  
            restrict: 'A',  
            controller: controller  

        function controller($scope, $element) {  
            var options = $element.data();  
            options.classInput = $element.data('classinput') || options.classInput;  


Angular Controller

Write the attribute ID:

var handleFileSelect = function (evt) {  
            var file = evt.currentTarget.files[0];  
            var reader = new FileReader();  
            reader.onload = function (evt) {  
                $scope.$apply(function ($scope) {  
                    $scope.myImage = evt.target.result;  
            if (file)  

        angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);   

Click the F5 button and run the application. Now it will appear in the browser and you can see the result.

Output 1


If you click the upload button, it will open file selectable windows and select any image in there.

Output 2


Once open, the image will be loaded in the image preview. The initial crop area will be represented as “Square.”


In this article, we have learned MVC using Angular Image Crop using Bootstrap Filestyle. If you have any queries, please tell me through the comments section. Your comments are very valuable.

Happy Coding!

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

mvc ,angular ,bootstrap ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}