In this article I will explain with an example, how to upload file without clicking Submit Button using HTML FileUpload element (INPUT FILE) in ASP.Net Core (.Net Core) Razor Pages.
The Submit Button will be hidden and as soon as File is selected, the Submit Button click event is triggered using JavaScript which will submit the Form and file is uploaded.
Note: For beginners in ASP.Net Core (.Net Core 7) Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Razor PageModel (Code-Behind)

The PageModel consists of following Handler methods.
Handler method for handling GET operation
Inside this Handler method, simply the View is returned.
 
Handler method for handling POST operation
Inside this Handler method, the IFormFile class is passed as a parameter.
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.
 
Then, a check is performed whether Directory (Folder) exists if not then the Directory (Folder) is created using IWebHostEnvironment interface.
Note: For more details about IWebHostEnvironment interface, please refer my article Using IWebHostEnvironment in ASP.Net Core.
 
An object of FileStream class is created and using CopyTo method of IFormFile class the file is saved to the Directory (Folder).
Finally, a message is set in the ViewData object.
public class IndexModel : PageModel
{
    private IWebHostEnvironment Environment;
 
    public IndexModel(IWebHostEnvironment _environment)
    {
        this.Environment = _environment;
    }
 
    public void OnGet()
    {
    }
 
    public void OnPostUpload(IFormFile 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);
            ViewData["Message"] = "File uploaded successfully.";
        }
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, the ASP.Net TagHelpers is inherited.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Attribute – This array allows to specify the additional Form Attributes. Here we need to specify enctype = “multipart/form-data” which is necessary for uploading Files.
The Razor Page consists of HTML FileUpload element, a Submit Button and a SPAN element for displaying ViewData Message.
The HTML FileUpload element has been specified with a JavaScript onchange event handler and the Submit Button is hidden.
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.
 

UploadFile JavaScript function

The UploadFile JavaScript function accepts FileUpload element as a parameter.
Inside UploadFile JavaScript function, a check is perform if the FileUpload element has selected file then it will trigger the click event of the Submit Button.
@page
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model FileUpload_Without_Button_Core_Razor.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="postedFile" multiple="multiple" onchange="UploadFile(this)" />
        <br />
        <input type="submit" id="btnUpload" value="Upload" asp-page-handler="Upload" style="display:none" />
        <br />
        <span style="color:green">@Html.Raw(ViewData["Message"])</span>
    </form>
    <script type="text/javascript">
        function UploadFile(postedFile) {
            if (postedFile.value != '') {
                document.getElementById("btnUpload").click();
            }
        }
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages: Upload File without clicking Submit Button
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Downloads

Download Code