Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to save an image to Database using MVC 4

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.

like image 374
Riquelmy Melara Avatar asked Oct 04 '13 16:10

Riquelmy Melara


People also ask

How Save image in database and display it into views in MVC?

Insert image into folder and inset image path into database and display image in view from image folder based on path given (stored) in database.

Can We Save image to database?

Write the code to insert the image into the database on the click event of the button. Fill in the roll number and click on the browse button to select the image. After selecting the image. Click on the Covert button to save the image.


1 Answers

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>
            }
like image 76
Jaime Torres Avatar answered Oct 07 '22 18:10

Jaime Torres