How to display binary images from Database to edit form using MVC 4

Question

I am storing images in Database as Binary Images successfully. I want to display these images in Edit form to modify and save changes. System.OutOfMemoryException' was thrown in Edit.cshtml form while displaying Binary Images from Database.

Can someone please correct my code.

Model class:

public class Accommodation
    {
        [Key]
        public string A_Unique_Id { get; set; }

        public byte[] Picture1 { get; set; }

        public byte[] Picture2 { get; set; }

        public byte[] Picture3 { get; set; }


  }

// GET: /Accommodation/Edit/5

public ActionResult Edit(string id)
    {
        Accommodation accommodation = db.Accommodation.Find(id);
        ViewBag.SelectedAustraliaStateId = new SelectList(db.AustraliaStates, "AustraliaStateId", "AustraliaStateName", accommodation.SelectedAustraliaStateId);

        return View(accommodation);
    }

// POST: /Accommodation/Edit/5

[HttpPost]
public ActionResult Edit(Accommodation accommodation)
{
    if (ModelState.IsValid)
    {
        db.Entry(accommodation).State = EntityState.Modified;

        //the following line is for re-assigning back the DDL modified value.
        accommodation.State = accommodation.SelectedAustraliaStateId;

        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(accommodation);
}

Edit.cshtml

<div class="editor-label">
        @Html.LabelFor(model => model.Picture1)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Picture1)
        @Html.ValidationMessageFor(model => model.Picture1)
    </div>

ERROR MESSAGE: Exception of type 'System.OutOfMemoryException' was thrown at line @Html.EditorFor(model => model.Picture1)

Nilesh Gajare · Accepted Answer · 2014-01-30 04:03:05Z

19

To display image in your view

View

<form  method="post" enctype="multipart/form-data">
@{
    if (Model.Picture1 != null)
      {
         string imageBase64 = Convert.ToBase64String(Model.Picture1);
         string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
         <img src="@imageSrc" width="100" height="100" />
      }
  }
    <input type="file" name="photo" id="files" accept="image/*;capture=camera">
    <button type="button">Submit</button>
  </form>

Controller

[HttpPost]
public ActionResult Edit(Accommodation accommodation)
{

  if (Request.Files["files"] != null)
    {
            byte[] Image;
            using (var binaryReader = new BinaryReader(Request.Files["files"].InputStream))
            {
                Image = binaryReader.ReadBytes(Request.Files["files"].ContentLength);
            }
    }
    accommodation.Picture1=Image;
  //your code to save data
}

edited Jan 30, 2014 at 4:03

answered Jan 29, 2014 at 4:06

Nilesh Gajare

6,4283 gold badges44 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Reddy Over a year ago

Hi Nilesh, this code is only to display the Image in edit view but when I submit the modified form, it is saving as NULL in Picture1 field. how can I save the image as well?

Nilesh Gajare Over a year ago

@Reddy are you getting the Image in your controller

Reddy Over a year ago

both GET and POST controllers are in the above code. Can you please check it.

Reddy Over a year ago

Getting an error message as "system.drawing.image' is a 'type' but is used like a 'variable'" at line Image = binaryReader.ReadBytes(Request.Files["files"].ContentLength);

Reddy Over a year ago

Nilesh, can you please let me know how to fix it. Thanks

|

Ghasem · Accepted Answer · 2016-05-03 04:40:06Z

0

byte[] imageByteData = System.IO.File.ReadAllBytes(imageFile);

string imageBase64Data = Convert.ToBase64String(imageByteData);

string imageDataURL = string.Format("data:image/jpg;base64{0}",imageBase64Data);

Session["photo"] = imageDataURL;

In _layout.cshtml page add this line.

edited May 3, 2016 at 4:40

Ghasem

15.8k27 gold badges151 silver badges192 bronze badges

answered May 3, 2016 at 4:18

Vishvanatha Achary

11 silver badge1 bronze badge

Collectives™ on Stack Overflow

How to display binary images from Database to edit form using MVC 4

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related