Question about Drag & Drop with multiple images

Coreysan 1,606 Reputation points
2022-05-16T17:00:21.597+00:00

(I'm a beginner with Javascript)

Im almost done with an MVC Core web app for a typical online store, where each product has 10 thumbnail images for viewing.

An admin can add product by filling out a typical MVC form with description and product name, and upload with the 10 images to the DB.

However, here's the deal - the admin needs to deal with each image one at a time, to do some modest cropping and/or resizing. For that reason,
it would be nice to display all 10 images first, edit them, and then when they are all ready, POST with one click.

This seems to me a little different than using <input type=file multiple> because I need to edit each image.

Can I edit images inside one dropzone with multiple=true?

Is there a smarter way? I know MVC, but I only know a little bit of native Javascript, and nothing at all about ajax, jquery, etc.

What would you suggest I look into?

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,080 questions
{count} votes

Accepted answer
  1. SurferOnWww 1,796 Reputation points
    2022-05-16T23:17:59.067+00:00

    How about:

    1) upload ten original images at one time,

    2) make thumb nail images from the original images at server side, and

    3) save the thumb nail images to DB.


1 additional answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 53,501 Reputation points
    2022-05-16T18:31:12.137+00:00

    cropping will take some javascript.

    1) you can upload the images and display as thumbnails and have an image edit page to crop,

    2) use javascript to display tumpnails on section, and allow cropping before upload. this will take a bit of javascript, but google will give examples of the javascript required.