How to save image in database and display it into Views in MVC 4?

Question

I have a table like followin:

CREATE TABLE [dbo].[tblA]
(
    [Id] INT NOT NULL PRIMARY KEY IDENTITY, 
    [fname] NVARCHAR(50) NULL, 
    [lname] NVARCHAR(50) NULL, 
    [imageUrl] NVARCHAR(50) NULL
)

I want use file upload to upload file. How to save image in database and display it into Views?

Answer 1

1. Creat an "Images" folder in Solution explorer.
2. Create an ADO.NET Entity Data Model (in this example is "Database1Entities")

3. Home Controller:

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Web.Mvc;
   
   namespace test2.Controllers
   {
   public class HomeController : Controller
   {
   public ActionResult Index()
   {
       return View();
   }
   
   public ActionResult FileUpload(HttpPostedFileBase file)
   {
   
       if (file != null)
       {
           Database1Entities db = new Database1Entities();
           string ImageName = System.IO.Path.GetFileName(file.FileName);
           string physicalPath =Server.MapPath("~/images/"+ ImageName);
   
           // save image in folder
           file.SaveAs(physicalPath);
   
           //save new record in database
           tblA newRecord = new tblA();
           newRecord.fname = Request.Form["fname"];
           newRecord.lname = Request.Form["lname"];
           newRecord.imageUrl = ImageName;
           db.tblAs.Add(newRecord);
           db.SaveChanges();
   
       }
       //Display records
       return RedirectToAction("../home/Display/");
   }
   
   public ActionResult Display()
   {
       return View();
   }
   }
   }
   

4. Index View

   @{
      ViewBag.Title = "Index";
   }
   
   @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,
                       new { enctype = "multipart/form-data" }))
   {
   <div>
   First name<br />
   @Html.TextBox("fname") <br />
   Last name<br />
   @Html.TextBox("lname") <br />
   Image<br />
   <input type="file" name="file" id="file" style="width: 100%;" /> <br />
   <input type="submit" value="Upload" class="submit" />
   </div>    
   }
   

5. Display View

   @{
       ViewBag.Title = "Display";
   }
   
   @{
      test2.Database1Entities db = new test2.Database1Entities();
   }
   @using (Html.BeginForm())
   {
   <table border="1">
   <thead>
       <tr>
           <th>Image</th>
           <th>First name</th>
           <th>Last name</th>
       </tr>
   </thead>
   <tbody>
       @foreach (var item in db.tblAs)
       {
           <tr>
               <td><img src="~/images/@item.imageUrl" width="100" height="100" /></td>
               <td>@item.fname</td>
               <td>@item.lname</td>
           </tr>
       }
   </tbody>
   </table>
   }
   

Output:

/Home/

/home/Display/