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

@Html.ValueFor(model => model.NewsTitle)

@Html.ValueFor(model => model.DateAdded)

@Html.ValueFor(model => model.NewsContent)

``` 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 = inp…

Accepted Answer

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);
```

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

Solution

Problem