File Upload in wwwroot Folder Using Input File Control(HTML) in Asp.Net Core 6/MVC Using C#

In this article i will show you how you can perform file upload in asp.net 6/MVC application using HTML input file control using c#.net. 

In my previous articles: 

Registration and Login Form Creation In Asp.net Core 6 Using C#.Net From Database,  Validate User Id and Password From MS SQL Database in Asp.Net Core Using C#,  Login Form In Asp.net Core 6 Using C# From Ms Sql Server Database,  How To Connect MS SQL Server Database in Asp.net Core MVC Using C#.Net

So for this article first we will create a new asp.net core project and in our wwwroot folder we will create a folder named as Images. 

After this we will create a controller class file and create a view. Please check the below code of view.

@{     ViewData["Title"] = "Upload  Page"; } @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @enctype = "multipart/form-data" })) {       <div class="text-center">         <h1 class="font-weight-bold">Upload File</h1>         <p style="color:red;font-weight:bold;">             @ViewBag.Message         </p>         <input type="file" name="formFile" />         <input type="submit" value="Upload" />     </div> }

In above code don't forgot the add the @enctype = "multipart/form-data" in your form tag. If you don't add it you will not be able to get the file which you want to upload at controller end when you submit the form.

Now we will write our controller code which is responsible for uploading the file.

[HttpGet]         public IActionResult Index()         {             return View();         }         [HttpPost]         public IActionResult Index(IFormFile formFile)         {             try             {                 string fileName = formFile.FileName;                 fileName = Path.GetFileName(fileName);                 string uploadpath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\images", fileName);                 var stream = new FileStream(uploadpath, FileMode.Create);                 formFile.CopyToAsync(stream);                 ViewBag.Message = "File uploaded successfully.";             }             catch             {                 ViewBag.Message = "Error while uploading the files.";             }              return View();         }

In above code i have user IFormFile to capture the uploaded file. Here you must need to take care one thing that name of the file upload control and instance name of IFormFile should be same. Here i have given file upload  control name as "filesName", and at controller end IFormFile object name as filesName. Namespace used in above code are as follows.

using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using System.Diagnostics; using System.IO;

 

Now we have done run the code and check the output.

Now select the file.

After selecting file click on upload button. I have put a break point to show you the file detail.

Here in above code you can check that we are getting all the detail of the file. Now press F5 and check the output.

Now at last we will check the wwwroot ->image folder for our uploaded file.

Download