File Upload Extension Validation In ASP.NET MVC And JavaScript

Introduction

Many times, we are required to upload a 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 we can upload a file and validate that file.

Description

The upload control in MVC checks the file extension as well as limitation of file size. This validates the control before post back to Server side and shows the warning message to end-user using JavaScript .

Steps To Build This Requirement

Step 1

First, create an MVC Empty Template project named as “FileUploadValidation”.


Step 2

Then, create a Model class file named “FileUpload1.cs”.

Code Ref

using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Web;
namespace FileUploadValidation.Models
{
    public class FileUpload1
    {
        public string ErrorMessage { get; set; }
        public decimal filesize { get; set; }
        public string UploadUserFile(HttpPostedFileBase file)
        {
            try
            {
                var supportedTypes = new[] { "txt", "doc", "docx", "pdf", "xls", "xlsx" };
                var fileExt = System.IO.Path.GetExtension(file.FileName).Substring(1);
                if (!supportedTypes.Contains(fileExt))
                {
                    ErrorMessage = "File Extension Is InValid - Only Upload WORD/PDF/EXCEL/TXT File";
                    return ErrorMessage;
                }
                else if (file.ContentLength > (filesize * 1024))
                {
                    ErrorMessage = "File size Should Be UpTo " + filesize + "KB";
                    return ErrorMessage;
                }
                else
                {
                    ErrorMessage = "File Is Successfully Uploaded";
                    return ErrorMessage;
                }
            }
            catch (Exception ex)
            {
                ErrorMessage = "Upload Container Should Not Be Empty or Contact Admin";
                return ErrorMessage;
            }
        }
    }
}

Code Description

I have declared two variables with different data types.

public string ErrorMessage { get; set; }
public decimal filesize { get; set; }

The first one is used to show warning message to the end-user if any fault happens during upload of file by the user.

The second one is to validate the file size if it exceeds.

public string UploadUserFile(HttpPostedFileBase file)

Then, I created one Definition and inside, I passed one system defined class object called “HttpPostedFileBase”. It serves as the base class for classes that provide access to individual files uploaded by client.

Then, I mentioned some supported extensions. You can add any extension. If you want pdf file validation, then add pdf/doc/docx/xls/xlsx/txt/jpg/jpeg/png in variable supported Types.

var supportedTypes = new[] { "jpg", "jpeg", "png" };

var supportedTypes = new[] { "txt", "doc", "docx", "pdf", "xls", "xlsx" };

First, validate the image extensions like “jpg, jpeg, png” only. Second, validate the file extensions like “txt, doc, docx, pdf, xls,xlsx”

var fileExt = System.IO.Path.GetExtension(file.FileName).Substring(1);

This will fetch the extension of posted file.

Here, GetExtension method is used to get the extension of uploaded file that is file.FileName From the path of the system.

if (!supportedTypes.Contains(fileExt))
                {
ErrorMessage = "File Extension Is InValid - Only Upload WORD/PDF/EXCEL/TXT File";
return ErrorMessage;
                }

Here ,whatever file is uploaded by the user, it can be checked as valid or not by this code.

if (!supportedTypes.Contains(fileExt))

If it satisfies, it is ok else the error message will be shown to the end-user.

ErrorMessage = "File Extension Is InValid - Only Upload WORD/PDF/EXCEL/TXT File";
return ErrorMessage;

We will check for file size validation.

else if (file.ContentLength > (filesize * 1024))
                {
                    ErrorMessage = "File size Should Be UpTo " + filesize + "KB";
                    return ErrorMessage;
                }

Here, the file.ContentLength gets the length of the file size in bytes.

Then, the filesize * 1024 is the required file size.

If file.ContentLength > filesize * 1024 value will exceed, then the warning message will be generated.

ErrorMessage = "File size Should Be UpTo " + filesize + "KB";

The filesize value defined in controller class file.

If all conditions are satisfied without any warning messages, then the successful message will come.

else
               {
                   ErrorMessage = "File Is Successfully Uploaded";
                   return ErrorMessage;
               }

All above description of code in Try {} block.

If any other warning and validation fail then the catch block will show warning message. Like empty upload control and required extension file’s size more than average.

catch (Exception ex)
            {
ErrorMessage = "Upload Container Should Not Be Empty or Contact Admin";                               return ErrorMessage;
            }

Step 3

Then, create a Controller class file named “FileController.cs”.

Code Ref

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FileUploadValidation.Models;
using System.Web.UI.WebControls;


namespace FileUploadValidation.Controllers
{
    public class FileController : Controller
    {
        //
        // GET: /File/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult fileupload()
        {
            return View();
        }
        [HttpPost]
        public ActionResult fileupload(HttpPostedFileBase file)
        {
            FileUpload1 fs = new FileUpload1();
            fs.filesize = 550;
            string us = fs.UploadUserFile(file);
            if (us != null)
            {
                ViewBag.ResultErrorMessage = fs.ErrorMessage;
            }
            return View();
        }
    }
}

Code Description

Here, I used the reference of Model class file for future one.

using FileUploadValidation.Models;

Here, I used Controller action method named “fileupload”.One for [HttpGet] and another for [HttpPost] attributes. 

[HttpGet]
public ActionResult fileupload()
        {
            return View();
        }
[HttpPost]
public ActionResult fileupload(HttpPostedFileBase file)
        {
            FileUpload1 fs = new FileUpload1();
            fs.filesize = 550;
            string us = fs.UploadUserFile(file);
            if (us != null)
            {
                ViewBag.ResultErrorMessage = fs.ErrorMessage;
            }
            return View();
        }

Here, I passed the class as earlier discussed on model class.

public ActionResult fileupload(HttpPostedFileBase file)

Here, I use the model class file object to inherits the properties.

FileUpload1 fs = new FileUpload1();

Here, I mentioned the limit of file size .

fs.filesize = 550;

That is 550 KB .

Here, I used the Model class function by passing base class object.

string us = fs.UploadUserFile(file);

If the uploaded value is not empty or null, then all warnings and successful messages will come in other ways in all validation messages as defined in model class file. 

if (us != null)
            {
                ViewBag.ResultErrorMessage = fs.ErrorMessage;
            }

Here, error message variable value is assigned to viewbag type that will pass value from controller to view using @ symbol.

Step4

Then, create one View named “fileupload.cshtml” inside "~\Views\File\fileupload.cshtml" .

Code Ref 

@model FileUploadValidation.Models.FileUpload1

@{
    ViewBag.Title = "Satyaprakash File Upload";
}
<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYA'S WORD/PDF/EXCEL/TXT UPLOAD FILE VALIDATION</h2>

<fieldset>
    <legend style="font-family:Arial Black;color:blue">Upload Here</legend>
    <form action="" method="post" enctype="multipart/form-data">
        @if (ViewBag.ResultErrorMessage != null)
        {
            <script type="text/javascript">
    window.onload = function () {
        alert("@ViewBag.ResultErrorMessage");
       };
            </script>
        }
        <input type="file" name="file" id="file " />
        <div>
            <input type="submit" value="Upload" />
        </div>
    </form>
</fieldset>

<footer>
    <p style="background-color: Yellow; color: Blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

Code Description

Here, I used model class file reference to access properties , message and function validation through base class object.

@model FileUploadValidation.Models.FileUpload1

Here, I mentioned title text. 

@{
    ViewBag.Title = "Satyaprakash File Upload";
}

The heading text is mentioned here.

<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYA'S WORD/PDF/EXCEL/TXT UPLOAD FILE VALIDATION</h2>

Then, I used viewbag validation messages using javascript as defined earlier in controller class file. 

<form action="" method="post" enctype="multipart/form-data">
        @if (ViewBag.ResultErrorMessage != null)
        {
            <script type="text/javascript">
    window.onload = function () {
        alert("@ViewBag.ResultErrorMessage");
       };
            </script>
        }
        <input type="file" name="file" id="file " />
        <div>
            <input type="submit" value="Upload" />
        </div>
    </form>

The upload control is defined here.

<input type="file" name="file" id="file " />

The button controller used for post back to server and check validation of uploaded file by the end user. 

 <div>
  <input type="submit" value="Upload" />
</div>

Here, I used the footer text . 

<footer>
    <p style="background-color: Yellow; color: Blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

Step5

Then, we manually configure settings for MVC url routing.

Code Ref 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace FileUploadValidation
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "File", action = "fileupload", id = UrlParameter.Optional }
            );
        }
    }
}

Code Description

Here, I mentioned my Controller name and Controller action method name to configure settings for MVC url routing.

defaults: new { controller = "File", action = "fileupload", id=UrlParameter.Optional }

OUTPUT

The Url route of this MVC app is:

http://localhost:62152/File/fileupload

The App View Design looks like this.

Here no file is uploaded So, The Message will come like this.

Here I uploaded one image file , The invalid file extension message will come.

I uploaded one txt file with out any error.

I uploaded one Excel file with out any error.

I uploaded one Word file with out any error.

I uploaded one Pdf file with out any error.

I uploaded one valid file extension but beyond the size limits.

The footer text style shows the date  and time.

Summary

1. Create valid file or supported file extensions only for upload and end user requirement.
2. Validation for the valid file extensions.
3. Validation for the invalid file extensions.