In this article I will explain a simple Tutorial with an example, how to upload a multiple files using HTML5 input file in ASP.Net Core (.Net Core) MVC.
Note: For beginners in ASP.Net Core (.Net Core 7) MVC, please refer my article .
 
 

Uploads Folder location

The Uploads Folder (Directory) is located inside the wwwroot Folder (Directory) of ASP.Net Core project.
ASP.Net Core: Upload multiple files using HTML5 input file
 
 

Controller

Inside the Controller, first the private property IWebHostEnvironment interface is created.
Then, the interface is injected into the Constructor (HomeController) using Dependency Injection method and the injected object is assigned to private property (created earlier).
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 the parameter which is a collection of type IFormFile.
Note: The name of the IFormFile parameter and the name of HTML FileUpload element must be exact same, otherwise the IFormFile parameter will be NULL.
 
First, the path of the Folder (Directory) where uploaded files be saved is fetched using IWebHostEnvironment interface.
Note: The IWebHostEnvironment interface is injected using Dependency Injection inside the IndexModel class, for more details please refer Using IWebHostEnvironment in ASP.Net Core. For more details on how to access Static Files in Core, please refer my article .Net Core 7: Static Files (Images, CSS and JS files) in ASP.Net Core.
 
After that, check is performed if Directory (Folder) not exists then the Directory (Folder) is created.
Then, a Generic List collection of object is created and FOR EACH loop is executed over the selected files and each file is saved to the Uploads Folder (Directory) using CopyTo method of IFormFile class.
Finally, a message is set into a ViewBag object and View is returned.
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 wwwPath = this.Environment.WebRootPath;
        string contentPath = this.Environment.ContentRootPath;
 
        string path = Path.Combine(this.Environment.WebRootPath, "Uploads");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }
 
        List<string> uploadedFiles = new List<string>(); 
        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);
                uploadedFiles.Add(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 following 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 which is necessary for uploading Files.
The View also consists of an HTML FileUpload element, a Submit Button and a SPAN element for displaying success message.
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>
    <form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index">
        <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