Header add

In this article we will discuss Upload (Save) File to wwwroot Folder (Directory) in ASP.Net Core.

Here we discuss how to upload multiple files will be selected using HTML FileUpload element and then will be uploaded and sent to Controller.

Before start this article, please visit our previous article IWebHostEnvironment in ASP.Net Core

Inside the Controller, the multiple files will be saved in a Folder (Directory) inside the www Folder in ASP.Net Core MVC.

Key points on File Upload 

To upload file in ASP.NET Core MVC IFormFile  is introducedThe name of the IFormFile parameter and the name of HTML FileUpload element must be exact same, otherwise the IFormFile parameter will be NULL.

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.
  • In application, check wwwroot folder exist or not.
  • IWebHostEnvironment interface is used to be injected as dependency in the Controller to read WebRootPath and ContentRootPath 


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, and a Submit Button and when it submit the result we bind both the image and file name in a tabul
The HTML FileUpload element has been specified with an additional HTML5 attribute multiple = “multiple” in order to allow user to select multiple files.

Output

When we run the application you can see like below screenshot of file upload and you can see the upload files are in desired folder.

file-upload-in-aspnetcore-mvc


</> Find the Source Code in Github

  Summary

Post a Comment

Previous Post Next Post