In this article I will explain with an example, how to implement Multipart/Form-Data file upload in Web API with ASP.Net Core MVC.
Namespaces
You will need to import the following namespaces.
using System.IO;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
Controller
The Action method Index by default supports the GET operation and hence another overridden method for POST operation is created which accepts the parameter which is a collection of type IFormFile.
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.
First 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 a loop is executed and one by one each file is saved to the Directory (Folder).
Finally, a message is displayed to the user using ViewBag.
public class HomeController : Controller
{
private IHostingEnvironment Environment;
public HomeController(IHostingEnvironment _environment)
{
Environment = _environment;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(List<IFormFile> postedFiles)
{
string wwwPath = this.Environment.WebRootPath;
string contentPath = this.Environment.ContentRootPath;
string path = Path.Combine(this.Environment.WebRootPath, "Uploads");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
List<string> uploadedFiles = new List<string>();
foreach (IFormFile postedFile in postedFiles)
{
string fileName = Path.GetFileName(postedFile.FileName);
using (FileStream stream = new FileStream(Path.Combine(path, fileName), FileMode.Create))
{
postedFile.CopyTo(stream);
uploadedFiles.Add(fileName);
ViewBag.Message += string.Format("<b>{0}</b> uploaded.<br />", fileName);
}
}
return View();
}
}
View
The View consists of an HTML Form which has been created using the Razor Tag attributes with the following attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
There is an HTML FileUpload element, a Submit Button and a SPAN element for displaying Message enclosed in a Form element.
The HTML Form has been specified with enctype=“multipart/form-data” attribute as it is necessary for File Upload operation and the FileUpload element has been specified with an additional HTML5 attribute multiple = “multiple” to allow user to select multiple files.
@{
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" asp-controller="Home" asp-action="Index">
<span>Select File:</span>
<input type="file" name="postedFiles" multiple />
<input type="submit" value="Upload" />
<br/>
<span style="color:green">@Html.Raw(ViewBag.Message)</span>
</form>
</body>
</html>
Screenshot
Downloads