Learn MVC Using Angular Image Crop


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.

Link your Angular configurable file in this code.

Angular Module

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

Work in Angular Image Crop

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

Using Bootstrap Filestyle directive:


CSS Code

Set the style in the image crop area design.

Angular Controller

Initiate the crop area as “circle.”

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.

Angular Controller

Write the attribute ID:

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!

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and learning new technologies.