How to upload/display images using ASP.net MVC4 with Entity Framework

Question

I have a data model like so

 public class NewsItem { public virtual int Id { get; set; } public virtual string NewsTitle { get; set; } public virtual string NewsContent { get; set; } public virtual byte[] NewsImage { get; set; } public virtual DateTime DateAdded { get; set; } public virtual bool IsLive { get; set; } }

I then display this data through a View like so:

@model BusinessObject.Domain.NewsItem <div class="row-fluid"> <h3> @Html.ValueFor(model => model.NewsTitle) </h3> <div class="span5"> <img src="~/Content/images/stock.jpg" /> </div> <div class="span7"> <p> @Html.ValueFor(model => model.DateAdded) </p> <p> @Html.ValueFor(model => model.NewsContent) </p> </div> </div>

I then save the data using the _db.SaveChanges() in my controller like so:

[Authorize] [HttpPost] public ActionResult Create(CreateNewsViewModel input) { if (ModelState.IsValid) { var news = new NewsItem(); news.NewsTitle = input.nTitle; news.NewsContent = input.nContent; news.DateAdded = input.nDateAdded; news.IsLive = input.nIsLive; Mydb data = new Mydb(); data.NewsItems.Add(news); data.SaveChanges(); return View("Index", data.NewsItems); } else { return View(input); } }

Currently I don't have an image upload bit. How would I go about this? In my db I have a binary field, and my data type in my object is a byte[]. But I don't know where I need to handle the Image Upload?

Do I need a seperate action that returns the view? Some pointers on this would be grand.

Cheers

Rob G · Accepted Answer · 2013-03-27 15:19:12Z

You'll want an input field of type file to upload from the View and an instance of the WebImage to handle the uploaded image:

View:

<input type="file" name="image" />

Controller:

WebImage image = WebImage.GetImageFromRequest(); byte[] toPutInDb = WebImage.GetBytes(); // ... put the byte array into the database

To display the images from your database, you will want a controller Action that retrieves the byte array from your database and returns a FileAction. You can get this image (for the image retrieving controller action) by instantiating another WebImage instance on the bytearray you retrieve from database:

WebImage image = new WebImage(byteArrayFromDb); File(image.GetBytes(), "image/" + image.ImageFormat, image.FileName);

You'll probably need to change byte[] toPutInDb = WebImage.GetBytes(); to byte[] toPutInDb = image.GetBytes();
So if I do the WebImage stuff in my controller in the httppost action then set the field to be the byte[] value then this would be committed on the data.SaveChanges(). Sounds good. I will give it a go later. Thanks for the replies people.
My WebImage.GetImageFromRequest always returns null. Any thoughts on why?
Ignore this, I needed to use an overload on my Html.BeginForm @@using (Html.BeginForm("Create", "ManageNews", FormMethod.Post, new { @@encType = "multipart/form-data" }))

Миле Милошески · Accepted Answer · 2013-06-17 08:22:11Z

I would go like this:

in your model class:

 public class NewsItem { public virtual int Id { get; set; } public virtual string NewsTitle { get; set; } public virtual string NewsContent { get; set; } public virtual string NewsImage { get; set; } //string instead of byte because you don't wanna store your whole image file in your database, but just the path of the image, and the image you will store in a folder somewhere on the server public virtual DateTime DateAdded { get; set; } public virtual bool IsLive { get; set; } }

in your controller:

[Authorize] [HttpPost] public ActionResult Create(CreateNewsViewModel HttpPostedFileBase file)// add this { if (ModelState.IsValid) { if (file != null) { file.SaveAs(HttpContext.Server.MapPath("~/Images/") + file.FileName); car.ImagePath = file.FileName; } // the rest of the code... } else { return View(input); } }

Then in your views you should have:

for upload:

<input id="NewsImage" title="Upload a image" type="file" name="file" />

for display in the foreach cycle add:

@Html.DisplayFor(modelItem => item.NewsImage)

don't forget to add enctype = "multipart/form-data" in the Html.BeginForm

I hope this would help.

makambi · Accepted Answer · 2013-03-27 21:14:33Z

1

Have a look at jquery file uploader You can find sample code for it

Hope this helps

answered Mar 27, 2013 at 21:14

makambi

7791 gold badge13 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to upload/display images using ASP.net MVC4 with Entity Framework

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related