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

src/Dropzone/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 2.23
+
+-   Support multiple files preview
+
 ## 2.20
 
 -   Enable file replacement via "drag-and-drop"

src/Dropzone/assets/dist/controller.js

@@ -32,19 +32,25 @@ class default_1 extends Controller {
         this.dispatchEvent('clear');
     }
     onInputChange(event) {
-        const file = event.target.files[0];
-        if (typeof file === 'undefined') {
+        const files = event.target.files;
+        if (!files.length) {
             return;
         }
         this.inputTarget.style.display = 'none';
         this.placeholderTarget.style.display = 'none';
-        this.previewFilenameTarget.textContent = file.name;
+        const firstFile = files[0];
+        let displayText = firstFile.name;
+        if (files.length > 1) {
+            const additionalFiles = files.length - 1;
+            displayText += ` +${additionalFiles} ${additionalFiles === 1 ? 'file' : 'files'}`;
+        }
+        this.previewFilenameTarget.textContent = displayText;
         this.previewTarget.style.display = 'flex';
         this.previewImageTarget.style.display = 'none';
-        if (file.type && file.type.indexOf('image') !== -1) {
-            this._populateImagePreview(file);
+        if (firstFile.type && firstFile.type.indexOf('image') !== -1) {
+            this._populateImagePreview(firstFile);
         }
-        this.dispatchEvent('change', file);
+        this.dispatchEvent('change', files);
     }
     _populateImagePreview(file) {
         if (typeof FileReader === 'undefined') {

src/Dropzone/assets/src/controller.ts

@@ -65,26 +65,32 @@ export default class extends Controller {
     }
 
     onInputChange(event: any) {
-        const file = event.target.files[0];
-        if (typeof file === 'undefined') {
+        const files = event.target.files;
+        if (!files.length) {
             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;
+        // Show the filename in preview with additional files count if needed
+        const firstFile = files[0];
+        let displayText = firstFile.name;
+        if (files.length > 1) {
+            const additionalFiles = files.length - 1;
+            displayText += ` +${additionalFiles} ${additionalFiles === 1 ? 'file' : 'files'}`;
+        }
+        this.previewFilenameTarget.textContent = displayText;
         this.previewTarget.style.display = 'flex';
 
-        // If the file is an image, load it and display it as preview
+        // If the first 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);
+        if (firstFile.type && firstFile.type.indexOf('image') !== -1) {
+            this._populateImagePreview(firstFile);
         }
 
-        this.dispatchEvent('change', file);
+        this.dispatchEvent('change', files);
     }
 
     _populateImagePreview(file: Blob) {

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

@@ -65,6 +65,39 @@ describe('DropzoneController', () => {
                          data-testid="preview-filename"></div>
                 </div>
             </div>
+            <div class="dropzone-container" data-controller="check dropzone" data-testid="container-multiple"> 
+                <input type="file"
+                       style="display: none"
+                       multiple="multiple"
+                       data-dropzone-target="input"
+                       data-testid="input-multiple" />
+
+                <div class="dropzone-placeholder" 
+                     data-dropzone-target="placeholder" 
+                     data-testid="placeholder-multiple">
+                    Placeholder
+                </div>
+
+                <div class="dropzone-preview"
+                     data-dropzone-target="preview"
+                     data-testid="preview-multiple"
+                     style="display: none">
+
+                    <button type="button"
+                            class="dropzone-preview-button"
+                            data-dropzone-target="previewClearButton"
+                            data-testid="button-multiple"></button>
+
+                    <div class="dropzone-preview-image"
+                         data-dropzone-target="previewImage"
+                         data-testid="preview-image-multiple"
+                         style="display: none"></div>
+
+                    <div class="dropzone-preview-filename"
+                         data-dropzone-target="previewFilename" 
+                         data-testid="preview-filename-multiple"></div>
+                </div>
+            </div>
         `);
     });
 
@@ -120,15 +153,15 @@ describe('DropzoneController', () => {
         const file = new File(['hello'], 'hello.png', { type: 'image/png' });
 
         user.upload(input, file);
-        expect(input.files[0]).toStrictEqual(file);
+        await waitFor(() => expect(input.files[0]).toStrictEqual(file));
 
         // 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).toStrictEqual(file);
+        expect(dispatched.detail[0]).toStrictEqual(file);
     });
 
     it('on drag', async () => {
@@ -153,4 +186,41 @@ describe('DropzoneController', () => {
         await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'none' }));
         await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'block' }));
     });
+
+    it('multiple files chosen', async () => {
+        startStimulus();
+        await waitFor(() => expect(getByTestId(container, 'container-multiple')).toHaveClass('connected'));
+
+        // Attach a listener to ensure the event is dispatched
+        let dispatched = null;
+        getByTestId(container, 'container-multiple').addEventListener('dropzone:change', (event) => {
+            dispatched = event;
+        });
+
+        // Select multiple files
+        const input = getByTestId(container, 'input-multiple');
+        const file1 = new File(['hello1'], 'hello1.png', { type: 'image/png' });
+        const file2 = new File(['hello2'], 'hello2.txt', { type: 'text/plain' });
+        const files = [file1, file2];
+
+        user.upload(input, files);
+
+        // The dropzone should be in preview mode
+        await waitFor(() => expect(getByTestId(container, 'input-multiple')).toHaveStyle({ display: 'none' }));
+        await waitFor(() => expect(getByTestId(container, 'placeholder-multiple')).toHaveStyle({ display: 'none' }));
+        await waitFor(() => expect(getByTestId(container, 'preview-multiple')).toHaveStyle({ display: 'flex' }));
+
+        // The event should have been dispatched with both files
+        expect(dispatched).not.toBeNull();
+        expect(dispatched.detail[0]).toStrictEqual(file1);
+        expect(dispatched.detail[1]).toStrictEqual(file2);
+
+        // Check preview content shows first file name plus count
+        const previewFilename = getByTestId(container, 'preview-filename-multiple');
+        expect(previewFilename.textContent).toBe('hello1.png +1 file');
+
+        // Only the first file (image) should show preview
+        const previewImage = getByTestId(container, 'preview-image-multiple');
+        await waitFor(() => expect(previewImage).toHaveStyle({ display: 'block' }));
+    });
 });