question

CoreyFleig-6304 avatar image
0 Votes"
CoreyFleig-6304 asked CoreyFleig-6304 commented

Question about Drag & Drop with multiple images

(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?

dotnet-aspnet-core-general
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

First, as we all known, to upload file in asp.net core, we need to use IFormFile. So to upload multiple images, in the controller, we need to use a list of IFormFile.

Then, to upload file via the JQuery Ajax, you could transfer the data use a FormData object, after select the images, you can append the image to the FormData. Then when click the submit button, it will transfer all images to the controller. Main code like this:

 var formData = new FormData();

 for (var file in files) {
   formData.append("battlePlans", file, file.name);
 }
 //use JQuery Ajax to call the controller with the form data.

The controller:

 public async Task<IActionResult> FileUpload(IFormFile battlePlans)
 {

More detail information, see the following tutorials:

Upload files in ASP.NET Core

Multiple File Upload Using MVC jQuery AJAX Post

Best regards,
Dillion

1 Vote 1 ·
surferonwww avatar image
0 Votes"
surferonwww answered CoreyFleig-6304 commented

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.

· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks for your suggestion!

The trouble I have is that the admin person will use the File Dialog to choose a file, and then go hunt and peck
for another, then another, etc., each image one-at-a-time.

That's what started this whole thing for me. It's one thing to choose all 10 - its quite another to choose one,
then go look for another and choose it, etc.

0 Votes 0 ·

a common practice is to upload on selection, and cache on the server.

or using the file api on the client, to display the thumbnail when selected. see this example using drop zone.js

https://codepen.io/blackjacques/pen/jyxNqL





0 Votes 0 ·

The trouble I have is that the admin person will use the File Dialog to choose a file, and then go hunt and peck for another, then another, etc., each image one-at-a-time.

I cannot see any trouble to pick up the images at one time if the admin person chooses the files in the same folder.

Are you saying that the admin person chooses the files in different folders?

0 Votes 0 ·

Thanks Bruce. I'll take a look!!

0 Votes 0 ·

The admin will choose an image from the filepicker, and then will have to close the dialog to do some cropping.
Then they will repeat for more images, up to 10.

Once recommendation was to use FormData with JQuery, so I'll look at that.

Thanks for your advice!

0 Votes 0 ·
Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered CoreyFleig-6304 commented

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.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@Bruce-SqlWork

I found some javascript online for cropping, and it looks doable.

My biggest concern is how to upload all 10 file names into the controller. It appears to me the only
way to list them all is by using IEnumerable<IFormFile>, which is bound to the <input type=file> element.

I don't know how to get 10 files delivered to the controller in one list, unless I specifically use <input>.

Am I confined to that element, or is there a better way?


0 Votes 0 ·