In this article I will explain with an example, how to upload multiple files using HTML5 INPUT file in ASP.Net Core MVC.
Note: For beginners in ASP.Net Core 7, please refer my article ASP.Net Core 7: Hello World Tutorial with Sample Program example.
 
 

Uploads Folder Location

The files will be saved inside the Uploads Folder (Directory) of wwwroot Folder (Directory).
ASP.Net Core: Upload multiple files using HTML5 input file
 
 

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

This Action method accepts collection of uploaded files as Generic List collection of IFormFile class.
First, the path of the Folder (Directory) where uploaded files will be saved is fetched using IWebHostingEnvironment interface.
Note: The IWebHostEnvironment interface is injected using Dependency Injection inside the Controller, for more details please refer my article Using IWebHostEnvironment in ASP.Net Core.
           For more details on how to access Static Files in Core, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
Then, a check is performed whether Folder (Directory) exists, if not then the Folder (Directory) is created.
A FOR EACH loop is executed over the Generic List collection of IFormFile class.
An object of FileStream class is created and path of the Folder (Directory) where uploaded files will be saved along with the FileName is passed as parameter.
It also accepts the FileMode as a parameter which is set to Create.
After that, using CopyTo method of IFormFile class each file is saved in the Uploads Folder (Directory).
Finally, the FileName with uploaded message is set into a ViewBag.
public class HomeController : Controller
{
    private IWebHostEnvironment Environment;
 
    public HomeController(IWebHostEnvironment _environment)
    {
        this.Environment = _environment;
    }
 
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public IActionResult Index(List<IFormFile> postedFiles)
    {
        string path = Path.Combine(this.Environment.WebRootPath, "Uploads");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }
 
        foreach (IFormFile postedFile in postedFiles)
        {
            string fileName = Path.GetFileName(postedFile.FileName);
            using (FileStream stream = new FileStream(Path.Combine(path, fileName), FileMode.Create))
            {
                postedFile.CopyTo(stream);
                ViewBag.Message += string.Format("<b>{0}</b> uploaded.<br />", fileName);
            }
        }
        return View();
    }
}
 
 

View

The View consists of an HTML Form which has been created using the following TagHelpers attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The HTML Form has been specified with enctype=“multipart/form-data” attribute as it is necessary for File Upload operation.
The Form consists of an HTML FileUpload element, a Submit Button and a SPAN element for displaying name of uploaded Files.
The FileUpload element has been set with the multiple attribute for selecting multiple Files at a time.
 

Submitting the Form

When the Upload button is clicked the Files are uploaded and ViewBag object is displayed inside the SPAN element using Html.Raw Helper method.
Note: For more details on how to use Html.Raw Helper method, please refer my article Using Html.Raw Helper Method in ASP.Net MVC.
 
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post" asp-controller="Home" asp-action="Index" 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>
    </form>
</body>
</html>
 
 

Screenshot

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

Downloads

Download Code