[Dropzone] Add multiple file preview

[phasdev]

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

Updated Dropzone component to support multiple file preview.
No breaking changes. Backwards compatible by default. User can opt-in to new features.

Example:

$form = $this->createFormBuilder()
    ->add('files', DropzoneType::class, [
        'multiple' => true,
        'preview' => [
            'style' => 'block',
            'can_toggle_placeholder' => true,
            'can_open_file_picker' => true,
        ]
    ])
    ->getForm();

Demo repo

---

Basic support for legacy style:
(File list shown in tooltip by setting file name element's title attribute)

New inline style:

New block style:

New block style with preview.can_toggle_placeholder = false:

---

• Added preview.style option. The (default) legacy option reproduces existing behaviour. The block and inline options enable new features.

• Added preview.can_toggle_placeholder option to control whether placeholder remains visible when preview is rendered. Can be true, false or auto. The auto option will hide placeholder for single-file uploads; adding additional files will show placeholder again.

• Added preview.can_open_file_picker option to control whether clicking preview container opens input file picker.

• New component handles drop event directly, making cross-browser behaviour consistent (#2552); i.e. it does not rely on file input for drop handling.

• Each selected file has its own preview. Thumbnails are shown for image files and a placeholder for other files. Files can be added/removed individually.

• File preview template, button image and placeholder image markup can be overridden by adding content to corresponding form theme blocks, allowing markup customization without having to override entire form theme.

• File input hidden to improve component style flexibility[1]. Input still visible to screen readers.

• File input wrapped within label so label can obtain focus, allowing keyboard/screen reader navigation.

• Component is outlined on drag hover, providing feedback that mouse is detected within dropzone.

• Legacy code clearly marked so it can be removed from component during next major release (if desired).

---

Related issues:

#2567
#2552
#1025
#7

Related PR's:

#2704
#2642
#512

[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.d.ts	675 B / 314 B	1.45 kB+120% 📈 / 520 B+66% 📈
controller.js	3.12 kB / 816 B	9.52 kB+205% 📈 / 2.07 kB+160% 📈
style.min.css	944 B / 468 B	3.75 kB+307% 📈 / 987 B+111% 📈

[phasdev]

Possible breaking change? Some controller targets have been removed and I've changed types on placeholderTarget and previewTarget so they're more generic. For example, the new placeholder is a <label> not a <div>, so I changed placeholderTarget type from HTMLDivElement to the more generic HTMLElement.

Since the documentation suggests using event listeners to extend behaviour I assumed the controller class wouldn't be extended directly, so perhaps these aren't breaking changes.

[phasdev]

I can add tests/docs when we're nearly ready to merge. Didn't want to add tests for features that may be dropped during review.