In this article I will explain with an example, how to upload multiple files using HTML5 (FileUpload element) in ASP.Net MVC.
HTML5 has provided an additional feature to select and upload multiple files and the same will be used along with ASP.Net MVC.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

Uploads folder location

The uploaded files will be saved in the Uploads Folder (Directory) of ASP.Net MVC project.
ASP.Net MVC: Upload multiple files using HTML5 input file
 
 

Namespaces

You will need to import the following namespace.
using System.IO;
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

The Action method accepts the parameter which is a Generic List collection of type HttpPostedFileBase.
Note: The name of the HttpPostedFileBase parameter and the name of HTML FileUpload element must be exact same, otherwise the HttpPostedFileBase parameter will be NULL.
 
Inside this Action method, first a check is performed whether the Uploads Folder (Directory) exists, if not then the Folder (Directory) is created.
Then, a FOR EACH loop is executed over the selected files and one by one each file is saved to the Uploads Folder (Directory) using SaveAs method of HttpPostedFileBase class.
Finally, a success message with File Name is set into ViewBag object.
public class HomeController : Controller
{
    // GET: Home
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(List<HttpPostedFileBase> postedFiles)
    {
        string path = Server.MapPath("~/Uploads/");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }
 
        foreach (HttpPostedFileBase postedFile in postedFiles)
        {
            if (postedFile != null)
            {
                string fileName = Path.GetFileName(postedFile.FileName);
                postedFile.SaveAs(path + fileName);
                ViewBag.Message += string.Format("<b>{0}</b> uploaded.<br />", fileName);
            }
        }
        return View();
    }
}
 
 

View

HTML Markup

The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
HtmlAttributes – This array allows to specify the additional Form Attributes. Here we need to specify enctype = “multipart/form-data” which is necessary for uploading Files.
The View also consists of an HTML FileUpload element and a Submit button.
The HTML FileUpload element has been specified with an additional HTML5 attribute multiple = “multiple” in order to allow user to select multiple files.
Finally, a message is displayed using ViewBag object.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <input type="file" name="postedFiles" multiple="multiple" /> 
            <input type="submit" value="Upload" />
            <br /><br />
            <span style="color:green">@Html.Raw(ViewBag.Message)</span>
        }
    </div>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Upload multiple files using HTML5 input file
 
 

Downloads

Download Code