Home > DeveloperSection > Articles > Upload File using Model Validation in ASP.NET MVC

Upload File using Model Validation in ASP.NET MVC


ASP.NET MVC ASP.NET MVC 
Ratings:
2 Comment(s)
 39100  View(s)
Rate this:

Upload File using Model Validation in ASP.NET MVC

Many times, we required to upload file with strongly-typed view and also apply validation on uploading file using data annotation validators. In this article, I would like to share, how can we upload a file and validate that file, firstly at client side and after that at server side.

To achieve this you have to do the following steps:

Create Student class and add the following properties with some data annotation attributes:

    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 model and write 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 Submit button, it will look something like below:

Upload File using Model Validation in ASP.NET MVC

Enter student information and browse photo to save student data.

Upload File using Model Validation in ASP.NET MVC

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

Upload File using Model Validation in ASP.NET MVC

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


Help

By Atik Shaikh on   8 months ago
how to display that image which has been uploaded on the server as path is not saved anywhere and can you provide more detail how to change the image after it is uploaded to the server

Great Article :)

By Ravi Anand on   7 months ago
Great article though.
@for #Atik Shaikh

//css part
 .imagePreview {
        width: 200px;
        height: 200px;
        border-radius:5px;
        background-position: center center;
        background-size: cover;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
        display: inline-block;
    }

//.cshtml part

  <div id="divImg" class="imagePreview"> </div>

//jquery part

 $(function () {
            $("#divImg").change(function () {
                var file = getNameFromPath($(this).val());
                var files = !!this.files ? this.files : [];
                if (file != null) {
                    var extension = file.substr((file.lastIndexOf('.') + 1));
                    switch (extension) {
                        case 'jpg':
                        case 'png':
                        case 'gif':
                            var reader = new FileReader(); // instance of the FileReader
                            reader.readAsDataURL(files[0]); // read the local file

                            reader.onloadend = function () { // set image data as background of div
                                $("#divImg").css("background-image", "url(" + this.result + ")");
                            }
                         
                            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("");
                    }
                }
            });
        });


Don't want to miss updates? Please click the below button!

Follow MindStick