In this article I will explain with an example, how to upload multiple files using HTML5 INPUT file in ASP.Net Core Razor Pages.
Note: For beginners in ASP.Net Core 7 Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: 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 Razor Pages: Upload multiple files using HTML5 INPUT file
 
 

Razor PageModel (Code-Behind)

The PageModel consists of the following Handler methods.

Handler method for handling GET operation

This Handler method is left empty as it is not required.
 

Handler method for handling POST operation

This Handler 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 IWebHostEnvironment 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 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 Message property.
public class IndexModel : PageModel
{
    private IWebHostEnvironment Environment;
    public string Message { get; set; }
 
    public IndexModel(IWebHostEnvironment _environment)
    {
        this.Environment = _environment;
    }
 
    public void OnGet()
    {
 
    }
 
    public void OnPostUpload(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);
                this.Message += string.Format("<b>{0}</b> uploaded.<br />", fileName);
            }
        }
    }
}
 
 

Razor Page (HTML)

Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The HTML of Razor Page consists of an HTML Form consisting of an HTML FileUpload element, a Submit Button and a SPAN element for displaying name of uploaded Files.
The HTML Form has been specified with enctype=“multipart/form-data” attribute as it is necessary for File Upload operation
The FileUpload element has been set with the multiple attribute for selecting multiple Files at a time.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostUpload but here it will be specified as Upload when calling from the Razor HTML Page.
 

Submitting the Form

When the Upload button is clicked the Files are uploaded and Model 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.
 
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model FileUpload_Razor_Core_7.Pages.IndexModel
 
@{
    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">
        <input type="file" name="postedFiles" multiple />
        <input type="submit" value="Upload" asp-page-handler="Upload" />
        <br />
        <span style="color:green">@Html.Raw(Model.Message)</span>
    </form>
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages: Upload multiple files using HTML5 INPUT file
 
 

Downloads

Download Code