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

Answer 1

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

Answer 2

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.

Answer 3

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

Hope this helps