18

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
    {
        [ScaffoldColumn(false)]
        public int ItemID { get; set; }
        [DisplayName("Category")]
        public int CategoryID { get; set; }
        [DisplayName("Brand")]
        public int BrandID { get; set; }
        [Required(ErrorMessage = "A Name is required")]
        [StringLength(160)]
        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")]
        [StringLength(1024)]

        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.

1 Answer 1

39

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

    [HttpGet]
    [AllowAnonymous]
    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:

    [HttpPost]
    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
                };
                imageRepository.AddHeaderImage(headerImage);
            }
        }
        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>
                    <span class="span2">
                        <input type="submit" name="button" value="Upload" class="btn btn-upload" />
                    </span>
                </div>
            }
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.