How to handle multiple image uploads

Question

I'm working on a ASP.NET MVC site that will allow a user to upload multiple images to a gallery. After a user uploads their images and before they are saved to the database, the user will have the ability to reorder the images using a jQuery drag and drop. The user can then submit their uploads. The user will also have the ability later on to edit their gallery and again have the ability to reshuffle the order of their images. I will not be saving the images to the database, just the filenames. I'm not sure how to best handle this. I'm thinking the POST controller will take a List<HttpPostedFileBase> parameter, and then convert to a byte [] array to maintain the image order. Then save the image names to the database as a comma separated string? What would the most efficient way to handle this be?

regrading the comma separated why don't you store it as json so the string will be like this : { "img1":"ImageName", "img2":"ImageName2"..etc} this will make it easier to access specific image and deal with it (delete , edit or add) — Cyber Progs
– Cyber Progs, Commented Feb 4, 2017 at 19:51
Actually what I'm looking for is the best method to process the image files and save to database, based upon the fact that the image order can change over time. — PixelPaul
– PixelPaul, Commented Feb 4, 2017 at 19:52
@Valkyriee, the images themselves will not be saved to the DB, just the file names. — PixelPaul
– PixelPaul, Commented Feb 4, 2017 at 19:53
i should add in my answer you can add a field in your database for ordering, any time you want to load your give that to your jquery and it will handle it — Masoud Andalibi
– Masoud Andalibi, Commented Feb 4, 2017 at 20:10
You need 2 tables, one for the 'parent' object your creating, and one for the images associated with it (a one-many relationship), and that table will include properties for the file path, display name and the FK to the parent object. If you want to display them in some specific order, then it also needs a property (say) int Order so that you can sort them by Order. And then in what ever plugin your using to drag and drop/rearrange the images, you can update the Order property and save back to the database. — user3559349
– user3559349, Commented Feb 4, 2017 at 22:05

Masoud Andalibi · Accepted Answer · 2017-02-05 05:25:12Z

Alright so if we put drag and drop a side, see this as your view:

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" name="files" value="" multiple="multiple"/> <input type="submit" value="Upload"/> }

In your controller:

[HttpPost] public ActionResult Index(HttpPostedFileBase[] files) { try { foreach (HttpPostedFileBase file in files) { string name = System.IO.Path.GetFileName(file.FileName); file.SaveAs(Server.MapPath("~/Images/" + name)); string filename = "Images/" + name; //Save the the filename to your database } } catch { throw ex; } return View(); }

Thank you for posting this. I basically understand this part of it, what I was trying to get at was what is the best method for keeping track of the order of the images. For example, a user uploads 4 images: pic1.jpg, pic2.jpg, pic3.jpg, pic4.jpg. Then shuffles the order of the images to: pic4.jpg, pic1.jpg, pic 3.jpg, pic2.jpg. How do I write the image names to the DB so when I read from the DB and display in the view, the images are in the correct order as specified by the user?
@PixelPaul Indeed. what Stephen Muecke said is the best practice.

Collectives™ on Stack Overflow

How to handle multiple image uploads

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related