Software Prerequisites
To follow this tutorial, ensure you have the following tools installed on your development machine.
Development IDE
Runtime Framework
Project Directory Structure
The uploaded files will be stored in a folder named Uploads located within the wwwroot folder.
The screenshot below shows the Solution Explorer.
![.Net 10: Upload File in ASP.Net Core]()
Controller Logic
IWebHostEnvironment Dependency injection
The Constructor is injected access the IWebHostEnvironment service.
Note: The IWebHostEnvironment service is the standard way to retrieve the physical path of the wwwroot folder.
private readonly IWebHostEnvironment _env;
//Dependency Injection
public HomeController(IWebHostEnvironment env)
{
_env = env;
}
The Controller manages the file upload process through two primary action methods:
Handling POST Requests
This method processes the actual file upload. It is decorated with the HttpPost attribute and accepts a file via the IFormFile interface.
Note: The name of the IFormFile parameter and the name of FormData must be exactly the same (case-sensitive , otherwise the IFormFile parameter will be NULL.
First, the name of the file is determined and then the path of the Uploads folder is generated which is located inside the wwwroot folder.
Then using Stream class, the file is saved in the Uploads folder.
Finally, a message is displayed to the user using ViewBag.
[HttpPost]
public async Task<IActionResult> Index(IFormFile postedFile)
{
//Extract the File Name.
string fileName = Path.GetFileName(postedFile.FileName);
//Generate the Path where File will be saved.
string path = Path.Combine(_env.WebRootPath, "Uploads", fileName);
//Save the File.
using Stream stream = System.IO.File.Create(path);
await postedFile.CopyToAsync(stream);
//Display the success message.
ViewBag.Message = string.Format("<b>{0}</b> uploaded.<br />", fileName);
return View();
}
View (HTML)
In this section the file uploading is done using a standard HTML Form. This approach uses a synchronous page submission where the page will refresh once the files are submitted to the server.
Note: When using a form, the most critical attribute is enctype="multipart/form-data". Without this, the server will not receive the file content.
There is an HTML FileUpload element, a Submit Button and a SPAN element for displaying Message enclosed in a Form element.
<form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index">
<span>Select File:</span>
<input type="file" name="postedFile" />
<input type="submit" value="Upload" />
<br /><br />
<span style="color:green">@Html.Raw(ViewBag.Message)</span>
</form>
Logic Breakdown
enctype Attribute
The enctype="multipart/form-data" is mandatory for file uploads. It tells the browser to encode the form into multiple parts, thus allowing large binary files to be sent.
Tag Helpers
I have used asp-controller and asp-action to set the Controller and the Action method.
Name Attribute
Notice that name="postedFiles" matches the parameter name in our C# Action method that handles POST.
This allows the .NET Model Binder to automatically map the files to our code.
ViewBag
After the form submission, I have used @Html.Raw() to display the success message so that HTML is rendered within the span element.
Screenshot
![.Net 10: Upload File in ASP.Net Core]()
Uploading Multiple Files
Downloads
