How to save an image to Database using MVC 4 entity-framework


So I have a project which is a Shopping Cart, I have to save images to the database instead of uploading them to the server, here is my model

namespace ShoppingCart.Models
    [Bind(Exclude = "ItemID")]
    public class Item
        public int ItemID { get; set; }
        public int CategoryID { get; set; }
        public int BrandID { get; set; }
        [Required(ErrorMessage = "A Name is required")]
        public string Title { get; set; }
        public string Description { get; set; }
        [Required(ErrorMessage = "Price is required")]
        [Range(0.01, 100.00,
            ErrorMessage = "Price must be between 0.01 and 500.00")]
        public decimal Price { get; set; }
        [DisplayName("Album Art URL")]

        public string ItemArtUrl { get; set; }
        public byte[] Picture { get; set; }

        public virtual Category Category { get; set; }
        public virtual Brand Brand { get; set; }
        public virtual List<OrderDetail> OrderDetails { get; set; }

So Im unsure how to go about the controller to insert images or the view to display them, I have search for information about this but I cant really find anything, Im using entity framework code first.

10/4/2013 4:06:57 PM

Accepted Answer

There are two easy ways to do images -- one is to simply return the image itself in the controller:

    public ActionResult ViewImage(int id)
        var item = _shoppingCartRepository.GetItem(id);
        byte[] buffer = item.Picture;
        return File(buffer, "image/jpg", string.Format("{0}.jpg", id));

And the view would just reference it:

    <img src="Home/ViewImage/10" />

Additionally, you can include it in the ViewModel:

    viewModel.ImageToShow = Convert.ToBase64String(item.Picture);

and in the view:

    @Html.Raw("<img src=\"data:image/jpeg;base64," + viewModel.ImageToShow + "\" />");

For the data-store, you would simply use a byte array (varbinary(max)) or blob or any compatible type.

Uploading images

Here, an object called HeaderImage is an EntityFramework EntityObject. The controller would look something like:

    public ActionResult UploadImages(HttpPostedFileBase[] uploadImages)
        if (uploadImages.Count() <= 1)
            return RedirectToAction("BrowseImages");

        foreach (var image in uploadImages)
            if (image.ContentLength > 0)
                byte[] imageData = null;
                using (var binaryReader = new BinaryReader(image.InputStream))
                    imageData = binaryReader.ReadBytes(image.ContentLength);
                var headerImage = new HeaderImage
                    ImageData = imageData,
                    ImageName = image.FileName,
                    IsActive = true
        return RedirectToAction("BrowseImages");

The View would look something like:

            @using (Html.BeginForm("UploadImages", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
                <div class="row">
                    <span class="span4">
                        <input type="file" name="uploadImages" multiple="multiple" class="input-files"/>
                    <span class="span2">
                        <input type="submit" name="button" value="Upload" class="btn btn-upload" />
5/23/2014 12:25:43 PM

Related Questions


Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow