In this article, we will learn how to upload multiple files using Asp.Net MVC and HTML 5.

Upload multiple files using ASP.NET MVC

HTML5 allows you to select and upload multiple files at the same time. Once the files are uploaded, you can process these using Asp.NET MVC.

The view contains an HTML form with an input text field, and a button to submit the form. Using enctype = "multipart/form-data" ensures that you can select multiple files using the shift or control keys from the keyboard.

The HTML form is using the Html.BeginForm() method which takes the following parameters.

ActionName – It specifics the name of the action file, which is “index” in this case.
ControllerName – The name of the controller which is “home” here.
FormMethod – The method name the form is using for the submission of data. This is set to POST.
HtmlAttributes – This parameter takes an array which specifies the additional attributes of the form. Like enctype = "multipart/form-data" which is necessary for uploading Files.

The View

    ViewBag.Title = "Home Page";
<br />

<div class="card">
    @using (Html.BeginForm("index", "home", FormMethod.Post, new { enctype = "multipart/form-data" }))
        <label> Select files:</label>
        <input type="file" name="files" multiple="multiple" />
        <input type="submit" value="Upload" />
        <span style="color:red">@Html.Raw(ViewBag.SuccessMessage)</span>

The Controller

The index by default uses the GET operation and hence, another method for POST operation is created to override the default support. It accepts the collection of type HttpPostedFileBase as the parameter.

Note: The name of the HttpPostedFileBase parameter and the name of HTML file upload must be the same. Otherwise, the HttpPostedFileBase will get a NULL value.

First, the code checks for the directory. If the directory doesn’t exist, it is created, and a loop is executed to read and save each file one by one. Finally, a message is displayed using the ViewBag property which enables you to pass values between the controller and view dynamically.

First, add the namespace IO as shown below:

using System.IO;

and the controller code:

  public class HomeController : Controller
        public ActionResult Index()

            return View();

        public ActionResult Index(List<HttpPostedFileBase> files)
            string path = Server.MapPath("~/Uploads/");
            if (!Directory.Exists(path))

            foreach (HttpPostedFileBase file in files)
                if (file != null)
                    string fileName = Path.GetFileName(file.FileName);
                    file.SaveAs(path + fileName);
                    ViewBag.SuccessMessage += string.Format("{0} uploaded!<br />", fileName);

            return View();



And the uploaded files inside the Uploads Folder

Related Articles

Last modified: September 29, 2019


Write a Reply or Comment

Your email address will not be published.