ttmind

Main Navigation

ttmind
  • jim-jams
  • Tech
  • Positive
Login

Login

Facebook Google

OR

Remember me Forgot password?

Don't have account? Signup here.

Sort by Categorys

.Net

PHP

Java

JavaScript

Database

Server

Client Side

Tools

Artificial Intelligence

Cloud

Hybrid Development

Event

Smart City

Education

Security

Scrum

Digital Marketing

APP Development

Business

Internet

Simulation

Art

Network

Microservices

Architecture

Technology

Leadership

    Top Articles

  • How Does Social Media Bring People Together?
    TTMind Author
  • How to read appSettings JSON from Class Library in ASP.NET Core
    Anil Shrestha
  • Printing Support In Asp.Net Core
    TTMind Author
  • HOW TO EXTRACT TEXT FROM IMAGE USING JAVASCRIPT (OCR with Tesseract.js)?
    Prakash Pokhrel
  • Images Upload REST API using ASP.NET Core
    Prakash Pokhrel
  • Related Topic

  • How to read appSettings JSON from Class Library in ASP.NET Core
  • Printing Support In Asp.Net Core
  • Images Upload REST API using ASP.NET Core
  • How to use IActionFilter, IAsyncActionFilter in ASP.NET Core MVC?
  • ASP.NET CORE - Blazor CRUD operation using ADO.NET
  • Tech
  • About Us
  • Contact Us
  • TechHelp
  • PositiveHelp
  • Jim-Jams Help
  • Terms & Conditions

© Copyright ttmind.com

Main Content

How to Upload File in ASP.NET Core with ViewModel?

.Net .Net Core about 7 years ago || 9/22/2018 || 18.7 K View

  • Hide

In ASP.NET Core it's very easy to upload a file, but a one need to know about interface IFormFile. So once you know about it all done. But let's have a look, how we can use it.

Note: Don't rely on the FileName property of IFormFile without validation. The FileName property should only be used for display purposes.

So to use this IFormFile we first need to create a ViewModel, which will have the property of IFormFile. To keep it easy and small I am using small ViewModel as Item. So my Item class looks like,

 

using System;
using System.Linq;
using Microsoft.AspNetCore.Http;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Threading.Tasks;
namespace FileUploader.Models {
 public class Item {
  public int ItemID {get;set;}
  [Required(ErrorMessage = "Please Type Item Name")]
  [Display(Name = "Item Name")]
  public string ItemName {get; set;}
  [Required(ErrorMessage = "Please Upload File")]
  [Display(Name = "Upload File")]
  [ValidateImage] //This is custom Attribute class, Can be removed
  public IFormFile formFile {get;set;}
 }
}

 

So my ValidateImage Attribute Class looks like,

using System;
using System.Linq;
using Microsoft.AspNetCore.Http;
using System.ComponentModel.DataAnnotations;
namespace FileUploader.Models {
 public class ValidateImageAttribute: ValidationAttribute {
  public override bool IsValid(object value) {
   int MaxContentLength = 1024 * 1024 * 2; //Max 2 MB file
   string[] AllowedFileExtensions = new
   string[] {
    ".jpg",
    ".gif",
    ".png"
   };
   var file = value as IFormFile;
   if (file == null)
    return false;
   else if (!AllowedFileExtensions.Contains((file != null) ?
     file.FileName.Substring(file.FileName.LastIndexOf('.')).ToLower() :
     string.Empty)) {
    ErrorMessage = "Please upload Your Photo of type: " +
     string.Join(", ", AllowedFileExtensions);
    return false;
   } else if (file.Length > MaxContentLength) {
    ErrorMessage = "Your Photo is too large, maximum allowed size is : " +
     (MaxContentLength / 1024).ToString() + "MB";
    return false;
   } else
    return true;
  }
 }
}

Now Let's Create our File Upload Helper Class, so that a logic can be reused in other case as well, so I just created a Class FileUploadHelper, which looks like,

using System;
using System.IO;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
namespace FileUploader.Models {
 public class FileUploadHelper {
  public async Task < string > SaveFileAsync(IFormFile file, string pathToUplaod) {
   string imageUrl = string.Empty;
   if (!Directory.Exists(pathToUplaod))
    System.IO.Directory.CreateDirectory(pathToUplaod); //Create Path of not exists
   string pathwithfileName = pathToUplaod + "\\" + GetFileName(file, true);
   using(var fileStream = new FileStream(pathwithfileName, FileMode.Create)) {
    await file.CopyToAsync(fileStream);
   }
   imageUrl = pathwithfileName;
   return imageUrl;
  }
  public string SaveFile(IFormFile file, string pathToUplaod) {
   string imageUrl = string.Empty;
   string pathwithfileName = pathToUplaod + "\\" + GetFileName(file, true);
   using(var fileStream = new FileStream(pathwithfileName, FileMode.Create)) {
    file.CopyTo(fileStream);
   }
   return imageUrl;
  }
  public string GetFileName(IFormFile file, bool BuildUniqeName) {
   string fileName = string.Empty;
   string strFileName = file.FileName.Substring(
     file.FileName.LastIndexOf("\\"))
    .Replace("\\", string.Empty);
   string fileExtension = GetFileExtension(file);
   if (BuildUniqeName) {
    string strUniqName = GetUniqueName("img");
    fileName = strUniqName + fileExtension;
   } else {
    fileName = strFileName;
   }
   return fileName;
  }
  public string GetUniqueName(string preFix) {
   string uName = preFix + DateTime.Now.ToString()
    .Replace("/", "-")
    .Replace(":", "-")
    .Replace(" ", string.Empty)
    .Replace("PM", string.Empty)
    .Replace("AM", string.Empty);
   return uName;
  }
  public string GetFileExtension(IFormFile file) {
   string fileExtension;
   fileExtension = (file != null) ?
    file.FileName.Substring(file.FileName.LastIndexOf('.')).ToLower() :
    string.Empty;
   return fileExtension;
  }
 }
}

 

The name of the methods are self explainable, Now we need to create Controller to Call this and render our View, So my Controller looks like,

public IActionResult AddItem() {
 return View();
}
[HttpPost]
public async Task < IActionResult > AddItem(Item obItem) {
 var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
 FileUploadHelper objFile = new FileUploadHelper();
 string strFilePath = await objFile.SaveFileAsync(obItem.formFile, uploads);
 strFilePath = strFilePath
  .Replace(_hostingEnvironment.WebRootPath, string.Empty)
  .Replace("\\", "/"); //Relative Path can be stored in database or do logically what is needed.
 return View();
}

Now we need to have a View, So my View looks like,

@model FileUploader.Models.Item

@{
    ViewData["Title"] = "AddItem";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>AddItem</h2>

<h4>Item</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="AddItem" enctype="multipart/form-data">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ItemID" class="control-label"></label>
                <input asp-for="ItemID" class="form-control" />
                <span asp-validation-for="ItemID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ItemName" class="control-label"></label>
                <input asp-for="ItemName" class="form-control" />
                <span asp-validation-for="ItemName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="formFile" class="control-label"></label>
                <input asp-for="formFile" type="file" class="form-control" />
                <span asp-validation-for="formFile" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

In the above view you have to look for the file upload that is,

<div class="form-group">
	<label asp-for="formFile" class="control-label"></label>
	<input asp-for="formFile" type="file" class="form-control" />
	<span asp-validation-for="formFile" class="text-danger"></span>
</div>

And one more a form attribute,

<form asp-action="AddItem" enctype="multipart/form-data">

A enctype="multipart/form-data" is must for file upload.

So all set, now if we run our application, we can see our view looks like,

So hopefully this will help if you need to work with this ViewModel way else if you using JQuery to upload then just post the form with your best way how doing and use the controller call code in your service area or as it needed.

  • 2
  • 0
  • 0
    • Facebook
    • Twitter
    • Google +
    • LinkedIn

About author

Alok Pandey

Alok Pandey

Love to share what I know.

Reset Your Password
Enter your email address that you used to register. We'll send you an email with your username and a link to reset your password.

Quick Survey