How to upload files in asp net core

Question

How to upload files or images using Asp net MVC 6 with some model data  Example  I have a form like this    lt form gt       lt input type  file  gt       lt input type  text  placeholder  Image name     gt       lt input type  text  placeholder  Image description     gt       lt input type  submit  value  Submit  gt   lt  form gt    I read many Tutorials in how to upload but I don t see anything uploading with some data like the form above   Also  is there any library for image manipulation for re-sizing and Image Watermarking same as Codeigniter image manipulation class   https   codeigniter com user guide libraries image lib html

User · Answer

you can try below code   1- model or view model  public class UploadImage      public string ImageFile   get  set      public string ImageName   get  set      public string ImageDescription   get  set        2- View page   lt form class  form-horizontal  asp-controller  Image  asp-action  UploadImage  method  POST  enctype  multipart form-data  gt    lt input type  file  asp-for  ImageFile  gt   lt input type  text  asp-for  ImageName  gt   lt input type  text  asp-for  ImageDescription  gt   lt  form gt    3- Controller   public class Image              private IHostingEnvironment  hostingEnv        public Image IHostingEnvironment hostingEnv                    hostingEnv   hostingEnv                  HttpPost        public async Task lt IActionResult gt  UploadImage UploadImage model  IFormFile ImageFile                  if  ModelState IsValid                     var filename   ContentDispositionHeaderValue Parse ImageFile ContentDisposition  FileName Trim               var path   Path Combine Directory GetCurrentDirectory     wwwroot    images   ImageFile FileName           using  System IO Stream stream   new FileStream path  FileMode Create                          await ImageFile CopyToAsync stream                        model ImageFile   filename            context Add model             context SaveChanges                              return RedirectToAction  Index   Home

User · Answer

You can add a new property of type IFormFile to your view model  public class CreatePost      public string ImageCaption   set get       public string ImageDescription   set get       public IFormFile MyImage   set  get        and in your GET action method  we will create an object of this view model and send to the view   public IActionResult Create        return View new CreatePost         Now in your Create view which is strongly typed to our view model  have a form tag which has the enctype attribute set to  multipart form-data    model CreatePost  lt form asp-action  Create  enctype  multipart form-data  gt           lt input asp-for  ImageCaption   gt       lt input asp-for  ImageDescription   gt       lt input asp-for  MyImage   gt        lt input type  submit   gt   lt  form gt    And your HttpPost action to handle the form posting   HttpPost  public IActionResult Create CreatePost model       var img   model MyImage     var imgCaption   model ImageCaption        Getting file meta data    var fileName   Path GetFileName model MyImage FileName      var contentType   model MyImage ContentType         do something with the above data       to do   return something     If you want to upload the file to some directory in your app  you should use IHostingEnvironment to get the webroot path  Here is a working sample   public class HomeController   Controller       private readonly IHostingEnvironment hostingEnvironment      public HomeController IHostingEnvironment environment                hostingEnvironment   environment             HttpPost      public IActionResult Create CreatePost model                   do other validations on your model as needed         if  model MyImage    null                        var uniqueFileName   GetUniqueFileName model MyImage FileName               var uploads   Path Combine hostingEnvironment WebRootPath   uploads                var filePath   Path Combine uploads uniqueFileName               model MyImage CopyTo new FileStream filePath  FileMode Create                    to do   Save uniqueFileName  to your db table                         to do    Return something         return RedirectToAction  Index   Home              private string GetUniqueFileName string fileName                fileName   Path GetFileName fileName           return  Path GetFileNameWithoutExtension fileName                                               Guid NewGuid   ToString   Substring 0  4                       Path GetExtension fileName             This will save the file to uploads folder inside wwwwroot directory of your app with a random file name generated using Guids   to prevent overwriting of files with same name   Here we are using a very simple GetUniqueName method which will add 4 chars from a guid to the end of the file name to make it somewhat unique  You can update the method to make it more sophisticated as needed   Should you be storing the full url to the uploaded image in the database     No  Do not store the full url to the image in the database  What if tomorrow your business decides to change your company product name from www thefacebook com to www facebook com    Now you have to fix all the urls in the table    What should you store    You should store the unique filename  which you generated above the uniqueFileName varibale we used above  to store the file name  When you want to display the image back  you can use this value  the filename  and build the url to the image   For example  you can do this in your view          var imgFileName    cats 46df png      lt img src    uploads  imgFileName   alt  my img   gt    I just hardcoded an image name to imgFileName variable and used that  But you may read the stored file name from your database and set to your view model property and use that  Something like    lt img src    uploads  Model FileName   alt  my img   gt    Storing the image to table   If you want to save the file as bytearray varbinary to your database  you may convert the IFormFile object to byte array like this  private byte   GetByteArrayFromImage IFormFile file        using  var target   new MemoryStream                  file CopyTo target           return target ToArray              Now in your http post action method  you can call this method to generate the byte array from IFormFile and use that to save to your table  the below example is trying to save a Post entity object using entity framework    HttpPost  public IActionResult Create CreatePost model          Create an object of your entity class and map property values     var post new Post     ImageCaption   model ImageCaption         if  model MyImage    null               post Image    GetByteArrayFromImage model MyImage              context Posts Add post        context SaveChanges        return RedirectToAction  Index   Home

User · Answer

Fileservice cs  public class FileService   IFileService       private readonly IWebHostEnvironment env       public FileService IWebHostEnvironment env                this env   env             public string Upload IFormFile file                var uploadDirecotroy    quot uploads  quot           var uploadPath   Path Combine env WebRootPath  uploadDirecotroy            if   Directory Exists uploadPath               Directory CreateDirectory uploadPath            var fileName   Guid NewGuid     Path GetExtension file FileName           var filePath   Path Combine uploadPath  fileName            using  var strem   File Create filePath                         file CopyTo strem                     return fileName           IFileService  namespace studentapps Services       public interface IFileService               string Upload IFormFile file            StudentController   HttpGet  public IActionResult Create         var student   new StudentCreateVM        student Colleges   dbContext Colleges ToList        return View student       HttpPost  public IActionResult Create  FromForm  StudentCreateVM vm        Student student   new Student                 DisplayImage   vm DisplayImage FileName          Name   vm Name          Roll no   vm Roll no          CollegeId   vm SelectedCollegeId               if  ModelState IsValid                var fileName   fileService Upload vm DisplayImage           student DisplayImage   fileName          getpath   fileName           dbContext Add student           dbContext SaveChanges            TempData  quot message quot      quot Successfully Added quot             return RedirectToAction  quot Index quot

User · Answer

lt form class  col-xs-12  method  post  action   News AddNews  enctype  multipart form-data  gt         lt div class  form-group  gt           lt input type  file  class  form-control  name  image    gt        lt  div gt         lt div class  form-group  gt           lt button type  submit  class  btn btn-primary col-xs-12  gt Add lt  button gt        lt  div gt     lt  form gt    My Action Is            HttpPost          public IActionResult AddNews IFormFile image                        Tbl News tbl News   new Tbl News                if  image  null                                   Set Key Name                 string ImageName  Guid NewGuid   ToString     Path GetExtension image FileName                      Get url To Save                 string SavePath   Path Combine Directory GetCurrentDirectory    wwwroot img  ImageName                    using var stream new FileStream SavePath  FileMode Create                                         image CopyTo stream                                               return View

[c#] How to upload files in asp.net core?

1- model or view model

2- View page

3- Controller

Examples related to c#

Examples related to file-upload

Examples related to asp.net-core-mvc

Examples related to image-manipulation