In this article I will explain a simple tutorial with example, how to upload a file in ASP.Net Core Razor Pages.
This article will illustrate how to upload multiple files and then save the files in a Folder (Directory) inside the wwwroot Folder in ASP.Net Core Razor Pages.
Note: For beginners in ASP.Net Core Razor Pages, please refer my article ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example.
 
 
Namespaces
You will need to import the following namespaces.
using System.IO;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
 
 
Razor PageModel (Code-Behind)
The PageModel consists of the following two Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
Handler method for handling File Upload operation
This Handler method handles the call made from the POST function from the Page and it 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 a check is performed whether Directory (Folder) exists if not then the Directory (Folder) is created inside the wwwroot Folder using IHostingEnvironment interface and then a loop is executed and one by one each file is saved to the Directory (Folder).
Note: The IHostingEnvironment interface is injected using Dependency Injection inside the IndexModel class, for more details please refer Using IHostingEnvironment in ASP.Net Core.
 
Finally, a message is displayed to the user using Message property.
public class IndexModel : PageModel
{
    private IHostingEnvironment Environment;
    public string Message { get; set; }
 
    public IndexModel(IHostingEnvironment _environment)
    {
        Environment = _environment;
    }
 
    public void OnGet()
    {
 
    }
 
    public void OnPostUpload(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);
                this.Message += string.Format("<b>{0}</b> uploaded.<br />", fileName);
            }
        }
    }
}
 
 
Razor Page (HTML)
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 Message enclosed in a Form element.
The HTML Form has been specified with enctype="multipart/form-data" attribute as it is necessary for File Upload operation and the FileUpload element has been specified with an additional HTML5 attribute multiple = “multiple” to allow user to select multiple files.
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.
 
When the Upload button is clicked, the Form gets submitted and the Files are uploaded.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model FileUpload_Razor_Core.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">
        <span>Select File:</span>
        <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
Upload File in ASP.Net Core Razor Pages
 
 
Downloads
Download Code