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.