feat(dropzone): enable multiple file uploads

Author: daFish

src/Dropzone/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## Unreleased
+-   Support added for selecting multiple files (#???) - @daFish
+
 ## 2.0
 
 -   Support for `stimulus` version 2 was removed and support for `@hotwired/stimulus`

src/Dropzone/Resources/assets/dist/controller.js

@@ -15,22 +15,25 @@ class default_1 extends Controller {
         this.previewImageTarget.style.display = 'none';
         this.previewImageTarget.style.backgroundImage = 'none';
         this.previewFilenameTarget.textContent = '';
+        document.querySelectorAll('.dropzone-preview-image-container').forEach(e => e.remove());
         this._dispatchEvent('dropzone:clear');
     }
     onInputChange(event) {
-        const file = event.target.files[0];
-        if (typeof file === 'undefined') {
-            return;
-        }
-        this.inputTarget.style.display = 'none';
-        this.placeholderTarget.style.display = 'none';
-        this.previewFilenameTarget.textContent = file.name;
-        this.previewTarget.style.display = 'flex';
-        this.previewImageTarget.style.display = 'none';
-        if (file.type && file.type.indexOf('image') !== -1) {
-            this._populateImagePreview(file);
+        for (const fileItem in event.target.files) {
+            const file = event.target.files[fileItem];
+            if (typeof file === 'undefined') {
+                return;
+            }
+            this.inputTarget.style.display = 'none';
+            this.placeholderTarget.style.display = 'none';
+            this.previewFilenameTarget.textContent = file.name;
+            this.previewTarget.style.display = 'flex';
+            this.previewImageTarget.style.display = 'none';
+            if (file.type && file.type.indexOf('image') !== -1) {
+                this._populateImagePreview(file);
+            }
+            this._dispatchEvent('dropzone:change', file);
         }
-        this._dispatchEvent('dropzone:change', file);
     }
     _populateImagePreview(file) {
         if (typeof FileReader === 'undefined') {

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

@@ -42,31 +42,34 @@ export default class extends Controller {
         this.previewImageTarget.style.display = 'none';
         this.previewImageTarget.style.backgroundImage = 'none';
         this.previewFilenameTarget.textContent = '';
+        document.querySelectorAll('.dropzone-preview-image-container').forEach(e => e.remove());
 
         this._dispatchEvent('dropzone:clear');
     }
 
     onInputChange(event: any) {
-        const file = event.target.files[0];
-        if (typeof file === 'undefined') {
-            return;
+        for (const fileItem in event.target.files) {
+            const file = event.target.files[fileItem];
+            if (typeof file === 'undefined') {
+                return;
+            }
+
+            // Hide the input and placeholder
+            this.inputTarget.style.display = 'none';
+            this.placeholderTarget.style.display = 'none';
+
+            // Show the filename in preview
+            this.previewFilenameTarget.textContent = file.name;
+            this.previewTarget.style.display = 'flex';
+
+            // If the file is an image, load it and display it as preview
+            this.previewImageTarget.style.display = 'none';
+            if (file.type && file.type.indexOf('image') !== -1) {
+                this._populateImagePreview(file);
+            }
+
+            this._dispatchEvent('dropzone:change', file);
         }
-
-        // Hide the input and placeholder
-        this.inputTarget.style.display = 'none';
-        this.placeholderTarget.style.display = 'none';
-
-        // Show the filename in preview
-        this.previewFilenameTarget.textContent = file.name;
-        this.previewTarget.style.display = 'flex';
-
-        // If the file is an image, load it and display it as preview
-        this.previewImageTarget.style.display = 'none';
-        if (file.type && file.type.indexOf('image') !== -1) {
-            this._populateImagePreview(file);
-        }
-
-        this._dispatchEvent('dropzone:change', file);
     }
 
     _populateImagePreview(file: Blob) {

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

@@ -39,7 +39,7 @@ describe('DropzoneController', () => {
                 <input type="file"
                        style="display: none"
                        data-dropzone-target="input"
-                       data-testid="input" />
+                       data-testid="input" multiple />
         
                 <div class="dropzone-placeholder" 
                      data-dropzone-target="placeholder" 

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

@@ -3,7 +3,7 @@
     {%- set attr = attr|merge({ 'data-controller': '', class: (attr.class|default('') ~ ' dropzone-input')|trim}) -%}
 
     <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" multiple />
 
         <div class="dropzone-placeholder" data-symfony--ux-dropzone--dropzone-target="placeholder">
             {%- if attr.placeholder is defined and attr.placeholder is not none -%}