---
title: "Upload File using Model Validation in ASP.NET MVC"  
description: "Many times, we required to upload the file with the strongly-typed view and also apply validation on uploading the file using data annotation validato"  
author: "Chris Anderson"  
published: 2013-01-29  
updated: 2020-01-31  
canonical: https://www.mindstick.com/articles/1133/upload-file-using-model-validation-in-asp-dot-net-mvc  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 11 minutes  

---

# Upload File using Model Validation in ASP.NET MVC

## Upload File using Model Validation in ASP.NET MVC

To achieve this you have to do the following steps:\

Create Student class and add the following properties with some [data annotation attributes](https://www.mindstick.com/articles/973/validations-on-asp-dot-net-control) :

```
    public class Student
    {
        public int Id { get; set; }
        [Required(ErrorMessage = "Please enter your first name!")]
        [StringLength(25)]
        public string FirstName { get; set; }
        [Required(ErrorMessage = "Please enter your last name!")]
        [StringLength(25)]
        public string LastName { get; set; }

        [Required(ErrorMessage = "Please browse your image")]
        [Display(Name = "Upload Image")]
        [NotMapped]
        [ValidateFile]
        public HttpPostedFileBase Photo { get; set; }
    }
```

Create a StudentDbContext class that inherits DbContext to setup table in a database:

```
    public class StudentDbContext : DbContext
    {
        public DbSet<Student> Student { get; set; }
    }
```

Create a class ValidateFileAttribute, inherits ValidationAttribute for data annotation validator for uploading file at server side:

```
//Customized data annotation validator for uploading file
    public class ValidateFileAttribute : ValidationAttribute
    {
        public override bool IsValid(object value)
        {
            int maxContent = 1024 * 1024; //1 MB
            string[] sAllowedExt = new string[] { ".jpg", ".gif", ".png" };


            var file = value as HttpPostedFileBase;

            if (file == null)
                return false;
            else if (!sAllowedExt.Contains(file.FileName.Substring(file.FileName.LastIndexOf('.'))))
            {
                ErrorMessage = "Please upload Your Photo of type: " + string.Join(", ", sAllowedExt);
                return false;
            }
            else if (file.ContentLength > maxContent)
            {
                ErrorMessage = "Your Photo is too large, maximum allowed size is : " + (maxContent / 1024).ToString() + "MB";
                return false;
            }
            else
                return true;
        }
    }
```

Add a connectionString element under the configuration tag in web.config, to setup database and information of students:

```
<connectionStrings>
    <addname="StudentDbContext"connectionString="Data Source=.\SQLEXPRESS; Initial Catalog=Student; Integrated Security=true"providerName="System.Data.SqlClient"/>
  </connectionStrings>
```

Design Controller (HomeController) as given below:

```
    public class HomeController : Controller
    {
        StudentDbContext db = new StudentDbContext();

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(Student model)
        {
            //Check server side validation using data annotation
            if (ModelState.IsValid)
            {
                try
                {
                    db.Student.Add(model);
                    db.SaveChanges();

                    var extension = Path.GetExtension(model.Photo.FileName);
                    var path = Path.Combine(Server.MapPath("~/Content/Student/Photo/"));
                    if (!Directory.Exists(path))
                        Directory.CreateDirectory(path);
                    model.Photo.SaveAs(path + model.Id + extension);
                    ModelState.Clear();
                }
                catch { }
                return View();
            }
            else
                return View(model);

        }
    }
```

Design View (Index) based on the model and write a script to validate file at client side:

```
@model UploadFile_ModelValidation.Models.Student
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script type="text/jscript">
        //get file size
        function GetFileSize(fileid) {
            try {
                var fileSize = 0;
                //for IE
                if ($.browser.msie) {
                    //before making an object of ActiveXObject,
                    //please make sure ActiveX is enabled in your IE browser
                    var objFSO = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $("#" + fileid)[0].value;
                    var objFile = objFSO.getFile(filePath);
                    var fileSize = objFile.size; //size in kb
                    fileSize = fileSize / 1048576; //size in mb
                }
                //for FF, Safari, Opeara and Others
                else {
                    fileSize = $("#" + fileid)[0].files[0].size //size in kb
                    fileSize = fileSize / 1048576; //size in mb
                }

                return fileSize;
            }
            catch (e) {
                alert("Error is :" + e);
            }
        }

        //get file path from client system
        function getNameFromPath(strFilepath) {
            var objRE = new RegExp(/([^\/\\]+)$/);
            var strName = objRE.exec(strFilepath);

            if (strName == null) {
                return null;
            }
            else {
                return strName[0];
            }
        }

        $(function () {
            $("#Photo").change(function () {
                var file = getNameFromPath($(this).val());
                if (file != null) {
                    var extension = file.substr((file.lastIndexOf('.') + 1));
                    switch (extension) {
                        case 'jpg':
                        case 'png':
                        case 'gif':
                            flag = true;
                            break;
                        default:
                            flag = false;
                    }
                }
                if (flag == false) {
                    $("#validationTxt").text("You can upload only jpg,png,gif extension file");
                    return false;
                }
                else {
                    var size = GetFileSize('file');
                    if (size > 3) {
                        $("#validationTxt").text("You can upload file up to 1 MB");
                    }
                    else {
                        $("#validationTxt").text("");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div>
        @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <table cellpadding="5">
                <tr>
                    <td>
                        @Html.LabelFor(m => m.FirstName)
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.FirstName, new { maxlength = 25 })
                        @Html.ValidationMessageFor(m => m.FirstName)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(m => m.LastName)
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.LastName, new { maxlength = 25 })
                        @Html.ValidationMessageFor(m => m.LastName)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(m => m.Photo)
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.Photo, new { type = "file" })
                        @Html.ValidationMessageFor(m => m.Photo, string.Empty, new { id = "validationTxt" })
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="Submit" />
                    </td>
                </tr>
            </table>
        }
    </div>
</body>
</html>
```

When you run an application and directly press the Submit button, it will look something like below:

![Upload File using Model Validation in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/0a636769-717f-408a-8070-659986d700b5/images/da58e221-bae0-43b9-a83a-645622bcb965.png)

Enter student information and browse photos to save student data.

![Upload File using Model Validation in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/0a636769-717f-408a-8070-659986d700b5/images/651e7e89-06d8-4394-b3b3-8526d822c993.png)

After saving you can verify, the image has been successfully uploaded on the server. It will create a folder if the folder does not exist.

![Upload File using Model Validation in ASP.NET MVC](https://www.mindstick.com/mindstickarticle/0a636769-717f-408a-8070-659986d700b5/images/a2f64135-cdfb-4f34-a4b8-6dde0fb9a171.png)

Thanks for reading this article. I think this will help you a lot.

---

Original Source: https://www.mindstick.com/articles/1133/upload-file-using-model-validation-in-asp-dot-net-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.