ASP.NET Core MVC 6: Uploading File(s)

In previous versions of ASP.NET, an uploaded file was represented by an instance ofSystem.Web.HttpPostedFileBase. This has been replaced in ASP.NET 5 (Core 1.0) by IFormFile, which is found in theMicrosoft.AspNet.Http namespace or Microsoft.Extensions.PlatformAbstractions package. It shares a few of the same properties and methods as its predecessor, but it also has its differences, as shown by example.

• Firstly we create a ViewModel for our Form:

  	namespace OpenBizz.ViewModels
  	{
  	public class ProductViewModel
  	{
  	[Required]
  	[StringLength(27,MinimumLength =7)]
  	public string ProductName { get; set; }
  	[Range(0,9999999999999999)]
  	public decimal ProductPrice { get; set; }
  	[Required]
  	[StringLength(500, MinimumLength = 19)]
  	public string ProductDescription { get; set; }
  	[Range(0,20000)]
  	public int QuantityOnHand { get; set; }
  	[Required]
  	[DataType(DataType.Date)]
  	public DateTime DateOut { get; set; }
  	[Required]
  	[Display(Name = "Select Warehouse")]
  	public int WarehouseID { get; set; }
  	[Required]
  	public List<Warehouse> Warehouses { get; set; }
  	[Required]
  	public List<ProductCategory> Categories { get; set; }
  	[Required]
  	[Display(Name = "Select Category")]
  	public int CategoryID { get; set; }
  	[Required(ErrorMessage ="Please Upload a Valid Image File")]
  	[DataType(DataType.Upload)]
  	[Display(Name ="Upload Product Image")]
  	[FileExtensions(Extensions ="jpg,png,gif,jpeg,bmp,svg")]
  	public IFormFile ProductImage { get; set; }
  	}
  	}

  view raw ProductViewModel.cs hosted with ❤ by GitHub
  As we can see our ViewModel contains an IFormFile object named ProductImage which will be used to create a file upload input field using ASP.NET Tag Helpers in our Create View.

• Then Create our actual Form in Create.cstml

  	@model OpenBizz.ViewModels.ProductViewModel
  	<h2>Create</h2>
  	<form asp-controller="Products" asp-antiforgery="true" asp-action="Create" enctype="multipart/form-data" method="post">
  	<div class="form-horizontal">
  	<h4>Product</h4>
  	<hr />
  	<div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div>
  	<div class="form-group">
  	<label asp-for="ProductName" class="control-label col-md-2"></label>
  	<div class="col-md-10">
  	<input asp-for="ProductName" class="form-control" />
  	<span asp-validation-for="ProductName" class="text-danger"></span>
  	</div>
  	</div>
  	<div class="form-group">
  	<label asp-for="ProductDescription" class="control-label col-md-2"></label>
  	<div class="col-md-10">
  	<textarea asp-for="ProductDescription" class="form-control"></textarea>
  	<span asp-validation-for="ProductDescription" class="text-danger"></span>
  	</div>
  	</div>
  	<div class="form-group">
  	<label asp-for="CategoryID" class="control-label col-md-2"></label>
  	<div class="col-md-10">
  	<select asp-for="CategoryID" asp-items="@(new SelectList(Model.Categories, "CategoryID", "CategoryName"))" class="form-control"></select>
  	<span asp-validation-for="CategoryID" class="text-danger"></span>
  	</div>
  	</div>
  	<div class="form-group">
  	<label asp-for="ProductPrice" class="control-label col-md-2"></label>
  	<div class="col-md-10">
  	<input asp-for="ProductPrice" class="form-control" />
  	<span asp-validation-for="ProductPrice" class="text-danger"></span>
  	</div>
  	</div>
  	<div class="form-group">
  	<label asp-for="QuantityOnHand" class="control-label col-md-2"></label>
  	<div class="col-md-10">
  	<input asp-for="QuantityOnHand" class="form-control" />
  	<span asp-validation-for="QuantityOnHand" class="text-danger"></span>
  	</div>
  	</div>
  	<div class="form-group">
  	<label asp-for="WarehouseID" class="control-label col-md-2"></label>
  	<div class="col-md-10">
  	<select asp-for="WarehouseID" asp-items="@(new SelectList(Model.Warehouses, "WarehouseID", "WarehouseName"))" class="form-control"></select>
  	<span asp-validation-for="WarehouseID" class="text-danger"></span>
  	</div>
  	</div>
  	<div class="form-group">
  	<label asp-for="DateOut" class="control-label col-md-2"></label>
  	<div class="col-md-10">
  	<input asp-for="DateOut" class="form-control datepicker-inline" />
  	<span asp-validation-for="DateOut" class="text-danger"></span>
  	</div>
  	</div>
  	<div class="form-group">
  	<label asp-for="ProductImage" class="control-label col-md-2"></label>
  	<div class="col-md-3">
  	<input asp-for="ProductImage" class="form-control" />
  	<span asp-validation-for="ProductImage" class="text-danger"></span>
  	</div>
  	</div>
  	<div class="form-group">
  	<div class="col-md-offset-2 col-md-10">
  	<input type="submit" value="Create" class="btn btn-default" />
  	</div>
  	</div>
  	</div>
  	</form>

  view raw Create.cshtml hosted with ❤ by GitHub

• Now we move to our Products Controller:

  	namespace OpenBizz.Controllers.Web
  	{
  	public class ProductsController : Controller
  	{
  	private ILogger<ProductsController> _logger;
  	private IRepository<Product> _products;
  	private IRepository<Warehouse> _warehouses;
  	private IRepository<ProductCategory> _categories;
  	private IApplicationEnvironment _appEnvironment;
  	public ProductsController(IApplicationEnvironment appEnvironment, IRepository<Product> products, IRepository<Warehouse> warehouses, IRepository<ProductCategory> categories, ILogger<ProductsController> logger)
  	{
  	_products = products;
  	_warehouses = warehouses;
  	_categories = categories;
  	_appEnvironment = appEnvironment;
  	_logger = logger;
  	}
  	public IActionResult Index()
  	{
  	try
  	{
  	return View(_products.GetAll().ToList());
  	}
  	catch (Exception ex)
  	{
  	_logger.LogDebug(ex.Message);
  	throw;
  	}
  	}
  	public IActionResult Create()
  	{
  	try
  	{
  	ProductViewModel p = new ProductViewModel()
  	{
  	Categories = _categories.GetAll().ToList(),
  	Warehouses = _warehouses.GetAll().ToList()
  	};
  	return View(p);
  	}
  	catch (Exception ex)
  	{
  	_logger.LogDebug(ex.Message);
  	throw;
  	}
  	}
  	[HttpPost]
  	[ValidateAntiForgeryToken]
  	public IActionResult Create(ProductViewModel product, IFormFile ProductImage)
  	{
  	try
  	{
  	if (ModelState.IsValid)
  	{
  	if (ProductImage != null && ProductImage.Length > 0)
  	{
  	var parsedContentDisposition = ContentDispositionHeaderValue.Parse(ProductImage.ContentDisposition);
  	string FilePath = parsedContentDisposition.FileName.Trim('"');
  	string FileExtension = Path.GetExtension(FilePath);
  	var uploadDir = _appEnvironment.ApplicationBasePath + $@"\Uploads\Images\{product.ProductName}\";
  	if(!Directory.Exists(uploadDir))
  	{
  	Directory.CreateDirectory(uploadDir);
  	}
  	var imageUrl = uploadDir + product.ProductName + FileExtension;
  	ProductImage.SaveAs(imageUrl);
  	}
  	var newProduct = Mapper.Map<Product>(product);
  	_products.Add(newProduct);
  	if (_products.SaveAll())
  	{
  	RedirectToAction("Index");
  	}
  	}
  	ProductViewModel p = new ProductViewModel()
  	{
  	Categories = _categories.GetAll().ToList(),
  	Warehouses = _warehouses.GetAll().ToList()
  	};
  	return View(p);
  	}
  	catch (Exception ex)
  	{
  	_logger.LogDebug(ex.Message);
  	throw;
  	}
  	}
  	}
  	}

  view raw ProductsController.cs hosted with ❤ by GitHub
  Now in in the above file as you can see I've used the repository Pattern with Entity Framework 7 (ORM). What it actually does is that it creates an abstraction layer between your code & ORM, so that whenever you want to change your ORM you can do that without any changes in our application code (To learn more about this Click Here). Now to the real topic, In the Constructor of our controller class we use an IApplicationEnvironment the purpose of which is to get the base path of our Web Application (there is no Server.MapPath available so we can't use "~" in our URLs to get the root of our Web Application). The ContentDispositionHeaderValue Class is used to get the ContentDisposition property of the IFormFile object. With this property we get the absolute path of the file that the user uploaded e.g. "C:\\Users\\Ahmed\\Tyres.png". The Trim Method is used to remove the double quotes while Path.GetFileName fetches us the name of the uploaded file from which Path.GetExtension method is used to get the extension of the uploaded file from the absolute path. The next few lines combine the Server's Root Path  (by getting ApplicationBasePath property of IApplicationEnvironment ) with our provided URL, Filename & Extension of uploaded file. In between I also created a Directory in the uploads folder just to organize things nicely.

In the end always remember to use best practices like Viewmodels (Mapping Models and Viewmodels), Repositories, Exception Handling and Error Logging to make your code maintainable in the long run.

Summary:-

Here we learned ASP.NET 5's / Core's new File Handling Interface that is different from the old System.Web approach but at the same time similar enough to easily get familiar with. If you've got any questions, post'em in the comments section, I'll reply as soon as possible. Ciao!