How To Save Image In Database And Display It Into Views In MVC 5

 Here, we will learn how to save an image in the database and to retrieve it into MVC 5 Views.

 Let's start. 

 

The images stored as Binary data will be fetched as BYTE Array and then, the BYTE Array will be converted to BASE 64 string and then displayed in View in ASP.NET MVC 5. 

 

Use Entity Framework to add table and connection string

Using steps like Data->ADO.NET Entity Data Model and connection string, it will automatically update in web.config and the Table is mapped as a class and the columns as property.

This is the table that is used to store images and details Column BinaryPhoto -Data type Varbinary(max) to store image in database in Byte format and Column PathPhoto – data type nvarchar(50) to store URL/Path of image

 

In index .cshtml

We are submitting details and using type=”file” for image.

1. <h2>Index</h2> @using (Html.BeginForm("Index", "Candidate", FormMethod.Post,new { enctype = "multipart/form-data" })) @* enctype='multipart/form-data is an encoding type that allows files to be sent through a POST. *@ {  
2. <div class="container">  
3.     <table>  
4.         <tr> </tr>// other details like name, address etc  
5.         <tr>  
6.             <td style="width:80px;height:50px"><label>Binary Image</label><input type="file" name="file1" id="file1" style="width: 100%;" /> <br /></td>  
7.             <td><label>Path Image</label> <input type="file" name="file2" id="file2" style="width: 100%;" /></td>  
8.             </td>  
9.             <td><input type="submit" value="Submit" /></td>  
10.         </tr>  
11.     </table>  
12. </div> }  

In Controller Action Method,

1. namespace angularmvcdemo.Controllers {  
2.         public class CandidateController: Controller {  
3.                 modeldataEntities db = new modeldataEntities();  
4.                 //   
5.                 public ActionResult Index() {  
6.                         return View();  
7.                     }  
8.                     [HttpPost]  
9.                 public ActionResult Index(CandidateDetail Details, HttpPostedFileBase File1, HttpPostedFileBase File2) {  
10.                     // file1 to store image in binary formate and file2 to store path and url  
11.                     // we are checking file1 and file2 are null or not according to that different case are there  
12.                     if (File1 != null && File1.ContentLength > 0 && File2 != null) {  
13.                         Details.BinaryPhoto = new byte[File1.ContentLength]; // file1 to store image in binary formate  
14.                         File1.InputStream.Read(Details.BinaryPhoto, 0, File1.ContentLength);  
15.                         string ImageName = System.IO.Path.GetFileName(File2.FileName); //file2 to store path and url  
16.                         string physicalPath = Server.MapPath("~/img/" + ImageName);  
17.                         // save image in folder  
18.                         File2.SaveAs(physicalPath);  
19.                         // store path in database  
20.                         Details.PathPhoto = "img/" + ImageName;  
21.                         db.CandidateDetails.Add(Details);  
22.                         db.SaveChanges();  
23.                         return PartialView("detail");  
24.                     }  
25.                     if (File1 != null && File1.ContentLength > 0 && File2 == null) {  
26.                         Details.BinaryPhoto = new byte[File1.ContentLength]; // file1 to store image in binary formate  
27.                         File1.InputStream.Read(Details.BinaryPhoto, 0, File1.ContentLength);  
28.                         db.CandidateDetails.Add(Details);  
29.                         db.SaveChanges();  
30.                         return PartialView("detail");  
31.                     }  
32.                     if (File1 == null && File2 != null) {  
33.                         string ImageName = System.IO.Path.GetFileName(File2.FileName); //file2 to store path and url  
34.                         string physicalPath = Server.MapPath("~/img/" + ImageName);  
35.                         // save image in folder  
36.                         File2.SaveAs(physicalPath);  
37.                         Details.PathPhoto = "img/" + ImageName;  
38.                         db.CandidateDetails.Add(Details);  
39.                         db.SaveChanges();  
40.                         return PartialView("detail");  
41.                     } else { //if both file1 and file2 are null then we can store others details without any image  
42.                         db.CandidateDetails.Add(Details);  
43.                         db.SaveChanges();  
44.                         return PartialView("detail");  
45.                     }  
46.                 }  

In detail, cshtml // to display image and other details,

1. @ {  
2.     angularmvcdemo.modeldataEntities db = new angularmvcdemo.modeldataEntities();  
3. } < table > < tr > < td colspan = "2"  
4. style = "width:800px;height:50px" > candidate < /td></tr > @foreach(var detail in db.CandidateDetails) { < tr > < td > binary image  
5.     @if(detail.BinaryPhoto != null) {  
6.         var base64 = Convert.ToBase64String(detail.BinaryPhoto);  
7.         var imgsrc = string.Format("data:image/jpg;base64,{0}", base64); < img src = '@imgsrc'  
8.         style = "max-width:100px;max-height:100px" / >  
9.     }  
10.     else { < img src = "~/img/avatar-default.jpg"  
11.         style = "max-width:100px;max-height:100px" / > @ * this is  
12.         default image in  
13.             case ofnot inserted any image(file1) in index.cshtml * @  
14.     } < /td></tr > < tr > < td > < label > path image < /label>  
15.     @if(@detail.PathPhoto != null) { < img src = "@detail.PathPhoto"  
16.         width = "100"  
17.         height = "100" / >  
18.     }  
19.     else { < img src = "~/img/avatar-default.jpg"  
20.         style = "max-width:100px;max-height:100px" / > @ * this is  
21.         default image in  
22.             case ofnot inserted any image(file2) in index.cshtml * @  
23.     } < /td></tr >  
24. } < /table>  

Output 

 

In the database, it stores like this.