Save Multiple Images to Database using MVC

Question

My code only saves first input image. I found this link to see how I can handle with multiple images. If I change HttpPostedFileBase to HttpPostedFileBase[], I cannot use InputStream and ContentLength for HttpPostedFileBase image

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,Name,Color,CategoryId,GenderId,Image")] Product product, HttpPostedFileBase image)
    {
        if (ModelState.IsValid)
        {
            byte[] imagee = null;
            if (Request.Files.Count > 0)
            {
                image = Request.Files[0];
                using (BinaryReader br = new BinaryReader(image.InputStream))
                {
                    imagee = br.ReadBytes(image.ContentLength);
                }
            }
            product.Image = imagee;
            db.Products.Add(product);
            db.SaveChanges();
            return RedirectToAction("Index");
    }

I show the only one image like this:

<img class="img-rounded img-responsive" src="data:image/jpg;base64,@System.Convert.ToBase64String(item.Image)" width="250" height="400" />

How can I store multiple images and also show them?

What do you mean you cannot use InputStream and ContentLength? And why are you using Request.Files[0] - your method already has a parameter for the files. If its IEnumerable<HttpPostedFileBase> image, then you just loop through the files - foreach(HtttpPostedFileBase file in image) { .... — user3559349
– user3559349, Commented Oct 15, 2016 at 11:06
by mean that, it shows definition for 'InputStream' and no extension method 'InputStream' accepting a first argument of type 'HttpPostedFileBase[]' could be found and same error for ContentLength. Our professor shared this code but I want to extend the code as storing multiple images. According to your comment, do I just use foreach to get every input? — John Mathew
– John Mathew, Commented Oct 15, 2016 at 11:26
HttpPostedFileBase[] is a collection - you need to loop though the collection to get each file in it. And of course your product.Image wont work since that only holds one image. You need a second database table to store the images (with a FK to the Product ID) — user3559349
– user3559349, Commented Oct 15, 2016 at 11:29
So new model will have Id primary key, ProductId foreign key, and Image in byte[]. When I select multiple images, the program will store them by using new created model and I will get the images from that new created model to show them. Am I right or can you show one sample? — John Mathew
– John Mathew, Commented Oct 15, 2016 at 11:43

Shyju · Accepted Answer · 2016-10-15 13:49:34Z

As Stephen mentioned in the comment, your current entity class definitions is for storing a single image against the product (one to one). If you prefer to have multiple images for an image, you should consider creating another table for images and have a one to many connections between them.

public class Product
{
  public int Id { set; get;}
  public string Name { set; get;}
  public string Color { set; get;}
  // Add other properties needed as well

  public ICollection<Image> Images { set; get;}
}
public class Image
{
  public int Id { set; get;}
  public byte[] ImageData { set; get;}
  public int ProductId { set; get;}
}

Now in your HttpPost action,

[HttpPost]
public ActionResult Create([Bind(Include = "Id,Name,Color,CategoryId,GenderId")]
                          Product product, IEnumerable<HttpPostedFileBase> images)
{
     if (ModelState.IsValid)
     {
         db.Products.Add(product);

         if (images!=null)
         {
            var imageList= new List<Image>();
            foreach(var image in images)
            {
               using (var br = new BinaryReader(image.InputStream))
               {
                 var data = br.ReadBytes(image.ContentLength);
                 var img=new Image { ProductId=product.Id };
                 img.ImageData = data;
                 imageList.Add(img);
               }
            }
            product.Images = imageList;
         }
         db.SaveChanges();
         return RedirectToAction("Index");
     }
     return View(product);
}

Collectives™ on Stack Overflow

Save Multiple Images to Database using MVC

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related