Press "Enter" to skip to content

How to Save Image in database and display it into Views ?

Md Saud 2

Sharing is caring !!

Insert image into folder and Inset image path into database and display image in view from image folder based on path given(stored) in database 

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

Used Entiyy 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 Table in mapped as a class and the colums as property
This is table to store image 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 use type=”file ” for image

<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. *@

{

<div class=”container”>

<table>

<tr>
</tr>// other details like name, address etc
<tr>

<td style=”width:80px;height:50px”><label>Binary Image</label><input type=”file” name=”file1″id=”file1″ style=”width: 100%;” /> <br />

</td>

<td>

<label>Path Image</label> <input type=”file” name=”file2″ id=”file2″ style=”width: 100%;” />

</td>

</td>

<td >

<input type=”submit” value=”Submit”/>

</td>

</tr>

</table>

</div>

}

 

In Controller

actionMethod

namespace angularmvcdemo.Controllers

{

public class CandidateController : Controller

{

modeldataEntities db = new modeldataEntities();

//

public ActionResult Index()

{

return View();

}

[HttpPost]

public ActionResult Index(CandidateDetail Details, HttpPostedFileBase File1, HttpPostedFileBaseFile2)

{

// file1 to store image in binary formate and file2 to store path and url

// we are checking file1 and file2 are null or not according to that different case are there

if (File1 != null && File1.ContentLength > 0 &&File2!=null)

{

Details.BinaryPhoto = new byte[File1.ContentLength];// file1 to store image in binary formate

File1.InputStream.Read(Details.BinaryPhoto, 0, File1.ContentLength);

string ImageName = System.IO.Path.GetFileName(File2.FileName);//file2 to store path and url

string physicalPath = Server.MapPath(“~/img/” + ImageName);

// save image in folder

File2.SaveAs(physicalPath);

// store path in database

Details.PathPhoto = “img/” + ImageName;

db.CandidateDetails.Add(Details);

db.SaveChanges();

return PartialView(“detail”);

}

if (File1 != null && File1.ContentLength > 0 &&File2==null)

{

Details.BinaryPhoto = new byte[File1.ContentLength];// file1 to store image in binary formate

File1.InputStream.Read(Details.BinaryPhoto, 0, File1.ContentLength);

db.CandidateDetails.Add(Details);

db.SaveChanges();

return PartialView(“detail”);

}

if (File1 ==null&& File2 != null)

{

string ImageName = System.IO.Path.GetFileName(File2.FileName);//file2 to store path and url

string physicalPath = Server.MapPath(“~/img/” + ImageName);

// save image in folder

File2.SaveAs(physicalPath);

Details.PathPhoto = “img/” + ImageName;

db.CandidateDetails.Add(Details);

db.SaveChanges();

return PartialView(“detail”);

}

else {//if both file1 and file2 are null then we can store others details without any image

db.CandidateDetails.Add(Details);

db.SaveChanges();

return PartialView(“detail”);

}

}

In detail cshtml //  to display  image and other details

@{

angularmvcdemo.modeldataEntities db = new angularmvcdemo.modeldataEntities();

}

<table><tr><td colspan=”2″ style=”width:800px;height:50px”>candidate</td></tr>

@foreach(var detail in db.CandidateDetails){

<tr><td> binary image

@if (detail.BinaryPhoto != null)

{ var base64 = Convert.ToBase64String(detail.BinaryPhoto);

var imgsrc = string.Format(“data:image/jpg;base64,{0}”, base64);

<img src=’@imgsrc’ style=”max-width:100px;max-height:100px” />

}

else { <img src=”~/img/avatar-default.jpg” style=”max-width:100px;max-height:100px” />

@* this is default image in case of  not inserted any image(file1) in index.cshtml*@
} </td></tr>

<tr><td><label>path image</label>

@if(@detail.PathPhoto!=null)

{<img src=”@detail.PathPhoto” width=”100″ height=”100″ />}

else

{<img src=”~/img/avatar-default.jpg” style=”max-width:100px;max-height:100px” />

@* this is default image in case of not inserted any image (file2)in index.cshtml*@
} </td></tr>

}</table>

display like this 

In database , store like this

Sharing is caring !!

  1. I just like the valuable information you provide for your articles. I will bookmark your blog and test again here frequently. I am reasonably sure I will be informed a lot of new stuff right right here! Best of luck for the following!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares