In this article I will explain with an example, how to fetch File from Form Collection in ASP.Net Core Razor Pages.
The uploaded Files are available in the Request.Form.Files collection 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 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 operation of uploading of File.
The File is fetched from the Request.Form.Files collection using the name of the HTML FileUpload element.
Then a check is performed whether Directory (Folder) exists if not then the Directory (Folder) is created inside the www Folder using IHostingEnvironment interface and then the file is saved to the Directory (Folder) using the FileStream class.
Note: For more details about IHostingEnvironment interface, please refer Using IHostingEnvironment in ASP.Net Core.
 
Finally, a message is displayed to the user using Message property.
Note: For more details on displaying message, please refer my article ASP.Net Core Razor Pages: Pass (Send) data from Page Model to Razor Page.
 
public class IndexModel : PageModel
{
    private IHostingEnvironment Environment;
    public string Message { get; set; }
 
    public IndexModel(IHostingEnvironment _environment)
    {
        Environment = _environment;
    }
 
    public void OnGet()
    {
 
    }
 
    public void OnPostUpload()
    {
        if (Request.Form.Files.Count > 0)
        {
            IFormFile postedFile = Request.Form.Files["postedFile"];
            string path = Path.Combine(this.Environment.WebRootPath, "Uploads");
            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }
 
            string fileName = Path.GetFileName(postedFile.FileName);
            using (FileStream stream = new FileStream(Path.Combine(path, fileName), FileMode.Create))
            {
                postedFile.CopyTo(stream);
                this.Message = "File uploaded successfully.";
            }
        }
    }
}
 
 
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.
The HTML Form has been specified with enctype="multipart/form-data" attribute as it is necessary for File Upload operation.
The Upload 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 File is uploaded.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Upload_File_FormCollection_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="postedFile" />
        <hr />
        <input type="submit" value="Upload" asp-page-handler="Upload" />
        <br/>
        <span style="color:green">@Model.Message</span>
    </form>
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Fetch File from Request.Form.Files Collection
 
 
Downloads
Download Code