4. How To Upload Image In ASP NET MVC

Welcome to tutorial on HOW TO UPLOAD IMAGE IN ASP.NET MVC. Here we go, At first write following line of code in Views/Home/Index.cshtml

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <h3>Upload Image</h3>

    <input type="file" name="file" value="Browse"/>

    <br />

    <input type="submit" value="Upload" />

}

@if(ViewBag.UploadSuccess==true)

{
    <span>Upload Completed Successfully</span>
}
Here using statement is used to create a form with help of html helper. Form Submission method is post method. Other type of methods are get,put,delete etc. Important thing to notice while uploading is enctype attribute, here enctype attribute is set to multipart form data. Now use input of type file for uploading file using it. Place a uploading button which actually submits the form to Index actionResult method of Home Controller.

Now in HomeController.cs place the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using YourProjectName.Models;
using System.IO; //for file operation

namespace YourProjectName.Controllers

{
    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Index(HttpPostedFileBase file)

        {

            var path = "";

            if(file!=null)

            {

                if(file.ContentLength>0)

                {

                    //for checking uploaded file is image or not

                    if(Path.GetExtension(file.FileName).ToLower()==".jpg"

                        || Path.GetExtension(file.FileName).ToLower() == ".png"

                      || Path.GetExtension(file.FileName).ToLower() == ".gif"

                        || Path.GetExtension(file.FileName).ToLower() == ".jpeg")

                        {

                        path = Path.Combine(Server.MapPath("~/Content/Images"), file.FileName);

                        file.SaveAs(path);

                        ViewBag.UploadSuccess = true;

                    }

                }

            }

            return View();

        }

    }

}

Here HttppostedFileBase is a datatype to accept the file submitted from the form. At first file is checked it is null or not. If not null  that is some file is uploaded then file length is checked if file length is greater then zero then we proceed. Now we check the file extention matches the file format of image or not like jpg,png,gif etc and then if it matches. Now we combine server folder path to upload and the filename together and finally save it with file.saveAs function. ViewBag is used to detect whether image file was successfully uploaded or not. Finally return view to show image is uploded. That's all for uploading image in ASP.NET MVC. Hope you guys understand better, if you have still any doubt then you can watch this video too. Thanks and do subscribe :)