[Dropzone] Inform the user of the number of files he uploads

[rrr63]

Q	A
Bug fix?	no
New feature?	yes
Docs?	no
Issues	#2567
License	MIT

Hi, I was implementing a multiple file dropzone in one of my projects, and i was facing the same problem mentioned in #2567.
I was thinking for a solution, should we make a preview of all files if they're images ?
Sounds an interesting idea first, but if users upload a lot of images, it could be very ugly to manage the preview. Also, i was worried about avoiding regression for projects that are already in production and to break some custom dropzone styles.

The solution i used for my project is to show the number of extra files user uploads. I was inspired by the original file type field, it just shows us the number of files, according to the stylized dropzone of symfony ux, the first element (if it is an image) display a preview, and we write to user the number of extra files he uploads.

Here a screenshot of three fields :
-dropzone with single file
-dropzone with 3 files
-standard file type field with 3 files

[github-actions]

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

File	Before (Size / Gzip)	After (Size / Gzip)
Dropzone
controller.js	3.12 kB / 816 B	3.39 kB+8% 📈 / 913 B+12% 📈

[Kocal]

Hi, and thanks for working on it!

Unfortunately, I'm not sure this is the best solution:

1. the english "files" is hard-coded and does not follow the browser locale, and it looks out of place for non-english users, e.g. french on your screenshot
2. I think people will expect other files thumbnail to be displayed as well, and not being hidden behind "+N files"

What about displaying the thumbnail + name of each dropped images instead?

[Kocal]

Suggested change

	## 2.23
	## 2.24

[rrr63]

Hi, and thanks for working on it!

Unfortunately, I'm not sure this is the best solution:

1. the english "files" is hard-coded and does not follow the browser locale, and it looks out of place for non-english users, e.g. french on your screenshot
2. I think people will expect other files thumbnail to be displayed as well, and not being hidden behind "+N files"

What about displaying the thumbnails + names of each dropped images instead?

Hi @Kocal , thank's for your comment

I was thinking about adding thumbnail to every single image dropped.
But I was worried about breaking custom CSS because the necessary width (or height) could be very large if you have to show 3 or 4 images + filenames in the dropzone section.