ASP.Net MVC 4 Image Upload Application Step by Step

I am going to develop an image upload application step by step in Asp.Net MVC 4.0. It is sometimes required to upload image in application.

It is sample application and you can upload one image against an employee.

Step 1.  Open Visual Studio and click on the File à New Project. Select ASP.Net MVC 4.0 Web application as shown below.

Step 2.  Give the project name as ImageUploadProject.

Step 3. Select Internet Application template as shown below and click on the OK button.

Step 4.  Run the application you will see the below screen in the browser.

Step 6.  In the SQL Server create Database EmployeeDB and table Employee as shown below.

               

CREATE TABLE [dbo].[Employee](

      [EmployeeID] [int] IDENTITY(1,1) NOT NULL,

      [FirstName] [nvarchar](50) NOT NULL,

      [LastName] [nvarchar](50) NOT NULL,

      [Address] [nvarchar](50) NULL,

      [ZipCode] [nvarchar](50) NULL,

 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED

(

      [EmployeeID] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

Step 7. Browse the solution and locate Model folder. Add Employee class as shown below

public class Employee    {

        public int EmployeeID { get; set; }

        [Required]

        [StringLength(50)]

        public string FirstName { get; set; }

        [Required]

        [StringLength(50)]

        public string LastName { get; set; }

        public string Address { get; set; }

        public string ZipCode { get; set; }

        [NotMapped]

        public HttpPostedFileBase Image { get; set; }

        [NotMapped]

        [Display(Name = "Image")]

        public string ImageFile { get; set; }

    }

Step 8.  Add EmployeeDBContext class in the Model folder as shown below

public class EmployeeDBContext:DbContext

    {

        public DbSet<Employee> EmployeeCollection { get; set; }

        public EmployeeDBContext()

            : base("EmployeeConnection") {        }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)

        {

            modelBuilder.Entity<Employee>().Map(m =>

            {

                m.MapInheritedProperties();

                m.ToTable("Employee");

            })          

            .Property(m => m.EmployeeID).HasColumnName("EmployeeID").HasDatabaseGeneratedOption(DatabaseGeneratedOption.Identity).IsRequired();

        }      

    }

Step 9. Add Employee Controller as shown below

Step 10. : Add the  below methods in the Employee Controller.

         public ActionResult Create()

        {

            return View();

        }

        //

        // POST: /Employee/Create

        [HttpPost]

        [ValidateAntiForgeryToken]

        public ActionResult Create(Employee empModel)

        {

            try

            {

             using (EmployeeDBContext edb = new EmployeeDBContext())

                {

                    edb.EmployeeCollection.Add(empModel);

                    edb.SaveChanges();

                    PictureUpload(empModel);

                }

                return RedirectToAction("Index");

            }

            catch(Exception ex)

            {

                return View();

            }

        }

Step 11. Right click on the Create method and select Add View method.

Step 12. Add the below tag to upload image in case if not auto generated in create.cshtml file.

<div class="editor-field">

                @Html.TextBoxFor(model => model.Image, new { type = "file" })

                @Html.ValidationMessageFor(model => model.Image)

        </div>

Step 12.  Add below 2 methods in the EmployeeController class

private void PictureUpload(Employee emp)

        {

            if (emp.Image.ContentLength > 0)

            {

               

                var filePath = Server.MapPath(@"/Content/Uploads");

                string savedFileName = Path.Combine(filePath, emp.EmployeeID.ToString()+".jpg");

                emp.Image.SaveAs(savedFileName);

               

            }

           

        }

        private void DownloadPetPicture(IList<Employee> empList)

        {

            foreach (var employee in empList)

            {

                var name = "/Content/Uploads/"+employee.EmployeeID.ToString() +".jpg";

                var picture = @UrlHelper.GenerateContentUrl( name,  this.HttpContext);

               

                employee.ImageFile = "<img src='" + picture + "'></img>";

            }

        }

Step 13. Update the Index method as shown below

public ActionResult Index()

        {

            List<Employee> employeeCollection = null;

            using (EmployeeDBContext emd = new EmployeeDBContext())

            {

              

                 employeeCollection =   emd.EmployeeCollection.ToList();

                 if (employeeCollection != null)

                     DownloadPetPicture(employeeCollection);

            }

            return View(employeeCollection);

        }

Step 14. Create one Uploads folder under Content folder in the solution. 

We can write code to auto generate the folder in case it is not available. But I have not coded that. Add strongly view with index method as shown in previous steps. 

Now build and type Employee/create you will see the below screen

Enter values and select image it will take you the index(or List) view as shown below