ASP.NET MVC5: Limit Upload File Type Extensions via Custom Data Annotation/Attribute
Restricting or limiting upload file type extensions is one of the key business requirement as depending on business requirement, it is not necessary that all file types are accepted by the web application. Sometimes only image files are accepted by the web application, sometimes only documents and sometimes the combination of image, documents and compress file types are accepted by the web system.
Today, I shall be demonstrating limiting/restricting of desire upload file type extensions via implementing custom data annotation/attribute component on ASP.NET MVC5 platform. This article is not specific to image file only, you can use the provided solution with any type of file format as well.
Following are some prerequisites before you proceed any further in this tutorial:
- Knowledge of ASP.NET MVC5.
- Knowledge of HTML.
- Knowledge of Bootstrap.
- Knowledge of C# Programming.
You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.
Let's begin now.
1) Create a new MVC web project and name it "ImgExtLimit".
2) You need to add/update "executionTimeout", "maxRequestLength" & "maxAllowedContentLength" properties values if not already added in the "Web.config" file as shown below i.e.
executionTimeout -> The amount of time require to process your request on the web server. The value is provided in seconds.
maxRequestLength -> The maximum size which your request can capture and send to the web server. The value is provided in bytes.
maxAllowedContentLength -> The maximum allowed size of your content (e.g. file, text data etc) which is sent to the web server. The value is provided in bytes.
3) Open the "Views->Shared->_Layout.cshtml" file and replace following code in it i.e.
In the above code, I have simply created a basic default layout page and linked the require libraries into it.
4) Create a new "Helper_Code\Common\AllowExtensionsAttribute.cs" file and replace the following code in it i.e.
In asp.net mvc5 creating customize data annotations/attributes is one of the cool feature. Asp.net mvc5 platform already contains a default FileExtensions attribute, but, the issue with this pre-built data annotation/attribute is that it is applicable only on string type view model properties and in my case I am uploading files via "HttpPostedFileBase" data type view model property, which means that the pre-built data annotation/attribute does not have any means to know the data type of the file(s) that I am uploading which will have eventually no effect on the limitation that is considered to be applied on the uploaded file type extensions. Of course there are many other tricks or work around to go about while working with pre-built FileExtensions attribute, but, I prefer the custom data annotation/attribute mechanism, which is much simpler.
So, in the above code, I have created a new class "AllowExtensionsAttribute" (by following naming convention of custom attribute class) and inherit ValidationAttribute class. Then, I have created a public property "Extensions" and set the default value with image file type extensions which means that my custom attribute will accept only image file type upload files. so, in order to allow require file type extensions, this property will be updated at the time of my custom attribute utilization accordingly. Finally, I have overridden the "IsValid(....)" method which will receive my upload file as "HttpPostedFileBase" data type and from this I will extract the file type extension of the upload file and then validates that whether it is according to either default file type extension restriction or according to my provided file type extensions.
5) Now, create a new "Models\ImgViewModel.cs" file and replace the following code in it i.e.
In the above code, I have created my view model which I will attach with my view. Here, I have created HttpPostedFileBase type file attachment property which will capture uploaded image/file data from the end-user, then I have also applied my custom "AllowExtensions" attribute to the FileAttach property and provide the list of file type extensions separated by comma (,) that I have allowed my system to accept. Then, I have created two more properties i.e. Message of data type string and isValid of data type Boolean for processing purpose.
6) Create a new "Controllers\ImgController.cs" file and replace the following code in it i.e.
In the above code, I have created GET "Index(...)" method which will initialize the view model with default values and send it to the view page. Finally, I have created POST "Index(...)" method which will receive input image file from the end-user, then validate the view model for allowed file type extensions and then send the response message accordingly.
7) Now, create a view "Views\Img\Index.cshtml" file and replace the following code in it i.e.
In the above code, I have created a simple view for uploading image file to the server which will validate the allowed file type extensions at server side.
8) Now, execute the project and you will be able to see the following in action i.e.
In this article, you will learn about uploading of image file by limiting/restricting the desire upload file type extensions via implementing custom data annotation/attribute component on ASP.NET MVC5 platform.You will also learn to create a custom data annotation/attribute class and then utilize the custom attribute n your view model property of type HttpPostedFileBase.