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>
    }
</div>

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.

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();
        }

   
        [HttpPost]
        public ActionResult Index(List<HttpPostedFileBase> files)
        {
            string path = Server.MapPath("~/Uploads/");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(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();
        }

    }

Screenshots

And the uploaded files inside the Uploads Folder

Related Articles