Upload Multiple File To wwwroot in ASP.NET Core MVC Using C#.Net

In today's article I will show you a simple tutorial with an example that how you can upload multiple files in a folder in wwwroot folder in asp.net core 8 mvc using c#.net. So, for this article first we will create a new asp.net core 8 mvc application and add a folder in wwwroot folder.

Now we will add a controller file and HttpGet metho as Index() in it. This method will act a page lode for the page.

[HttpGet]
public IActionResult Index()
{
    return View();
}

In above code I have define a method with return type as IActionResult with HttpGet method. Now let's create a view. In a view we will add our Html code base.

 @{
	ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm("Index", "UploadFile", FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
	<div style="color:red" id="divmessage">@ViewBag.Message</div>
	<div style="font-weight:bold;">Select File:</div>
	<div>
		<input type="file" multiple class="form-control" name="file" id="filecontrol" style="width:300px;" />
	</div>
	<br />
	<div>
		<input type="submit" value="Upload File" />
	</div>
}

In above code to upload the multiple file I have used a property in input control of type file as multiple (Please check the above highlighted piece of code). Without this we will not be able to select multiple files on browse. Now let me explain other items in detail.

Here Html.BeginForm methos is used for defining the form tag. In this method we need to add the Action name and the controller name and Form Method Type as Post. This piece of code will define that when user click on submit button which method need to execute at controller end. Here one of the most important things which we need to take care new { @enctype = "multipart/form-data" }. If we don't add this html attribute, we will not be able to get the selected file at the controller end.

In next line I have taken the div control to display the message. Here I have taken the @ViewBag.Message to display the message send from controller end. In next line I have taken the input control of file type. to upload the browse the file. Here I have taken the file control name as name='file' and in this file i have added "multiple" to enable to select the multiple files to select. The name of the file control must be same as the parameter passed to the HttpPost method. In next line I have taken the Submit to submit the file to upload.

Now let's create the HttpPost method and add the below code.

[HttpPost]
public IActionResult Index(IFormFile[] file)
{
    if (file.length > 0)
    {
        try
        {
            for (int i = 0; i < file.Length; i++)
            {
                string parentPath = @"wwwroot\DemoFolder\";
                string uploadfilepath = Path.Combine(Directory.GetCurrentDirectory(), parentPath, file[i].FileName);
                var filestream = new FileStream(uploadfilepath, FileMode.Create);
                file[i].CopyToAsync(filestream);
            }
            ViewBag.Message = string.Format("Total of {0} Files uploaded successfully.", file.Length);
        }
        catch (Exception ex)
        {
            ViewBag.Message = ex.Message;
        }
    }
    else
    {
        ViewBag.Message = "Please select file to upload.";
    }
    return View();
}

In above code i have defined a method of HttpPost type named as Index(). In this method I have passwd a parameter of IFormFile[]. As we can see this is an array of the IFormFile and the name of the parameter is same as the Input file type control name. Here I have taken an array because we need to capture multiple files which user is uploading.

In next like I have validated the user have selected any file or not. If user have selected any file on that case, we will get file count greater than zero. In next line I have used for loop to upload user selected file on by one. After that I have defined a variable where I are defining the folder path created in wwwroot folder.

In next line of code, I have prepared the complete upload path of the file by using Path.Combine, and after that I have crated the FileStream if the upload file which we have captured at controller end. Now to save the file in the respective directory we have user CopyToAsync. Now we have done let run the application and check the output.