fixup! feat(dropzone): enable multiple file uploads

Author: daFish

src/Dropzone/CHANGELOG.md

@@ -1,7 +1,7 @@
 # CHANGELOG
 
 ## Unreleased
--   Support added for selecting multiple files (#???) - @daFish
+-   Support added for selecting multiple files (#512) - @daFish
 
 ## 2.0
 

src/Dropzone/Resources/assets/src/controller.ts

@@ -67,9 +67,9 @@ export default class extends Controller {
             if (file.type && file.type.indexOf('image') !== -1) {
                 this._populateImagePreview(file);
             }
-
-            this._dispatchEvent('dropzone:change', file);
         }
+
+        this._dispatchEvent('dropzone:change', event.target.files);
     }
 
     _populateImagePreview(file: Blob) {

src/Dropzone/Resources/assets/test/controller.test.ts

@@ -105,7 +105,7 @@ describe('DropzoneController', () => {
         expect(dispatched).toBe(true);
     });
 
-    it('file chosen', async () => {
+    it('single file chosen', async () => {
         startStimulus();
         await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'block' }));
 
@@ -126,6 +126,35 @@ describe('DropzoneController', () => {
 
         // The event should have been dispatched
         expect(dispatched).not.toBeNull();
-        expect(dispatched.detail).toStrictEqual(file);
+        expect(dispatched.detail[0]).toStrictEqual(file);
+    });
+
+    it('multiple files chosen', async () => {
+        startStimulus();
+        await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'block' }));
+
+        // Attach a listener to ensure the event is dispatched
+        let dispatched = null;
+        getByTestId(container, 'container').addEventListener('dropzone:change', (event) => (dispatched = event));
+
+        // Select the file
+        const input = getByTestId(container, 'input');
+        const files = [
+            new File(['hello'], 'hello.png', { type: 'image/png' }),
+            new File(['again'], 'again.png', { type: 'image/png' }),
+        ]
+
+        user.upload(input, files);
+        expect(input.files[0]).toStrictEqual(files[0]);
+        expect(input.files[1]).toStrictEqual(files[1]);
+
+        // The dropzone should be in preview mode
+        await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'none' }));
+        await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'none' }));
+
+        // The event should have been dispatched
+        expect(dispatched).not.toBeNull();
+        expect(dispatched.detail[0]).toStrictEqual(files[0]);
+        expect(dispatched.detail[1]).toStrictEqual(files[1]);
     });
 });

src/Dropzone/Resources/views/form_theme.html.twig

@@ -4,7 +4,7 @@
 
 
     <div class="dropzone-container" data-controller="{{ dataController }}">
-        <input type="file" {{ block('widget_attributes') }} data-symfony--ux-dropzone--dropzone-target="input">
+        <input type="file" {{ block('widget_attributes') }} data-symfony--ux-dropzone--dropzone-target="input" />
 
         <div class="dropzone-placeholder" data-symfony--ux-dropzone--dropzone-target="placeholder">
             {%- if attr.placeholder is defined and attr.placeholder is not none -%}

src/Dropzone/Tests/Form/DropzoneTypeTest.php

@@ -79,7 +79,7 @@ public function testRenderFormWithMultiFileUploads(): void
 
         $this->assertSame(
             '<form name="form" method="post" enctype="multipart/form-data"><div id="form"><div><label for="form_photo" class="required">Photo</label><div class="dropzone-container" data-controller="mydropzone symfony--ux-dropzone--dropzone">
-        <input type="file" id="form_photo" name="form[photo]" required="required" data-controller="" class="dropzone-input" data-symfony--ux-dropzone--dropzone-target="input" multiple />
+        <input type="file" id="form_photo" name="form[photo][]" required="required" data-controller="" multiple="multiple" class="dropzone-input" data-symfony--ux-dropzone--dropzone-target="input" />
 
         <div class="dropzone-placeholder" data-symfony--ux-dropzone--dropzone-target="placeholder"></div>