bug #3843 [Dropzone] Fix the drop zone appearing empty when the same file is dropped again (Kocal)

This PR was merged into the 3.x branch.

Discussion
----------

[Dropzone] Fix the drop zone appearing empty when the same file is dropped again

| Q              | A
| -------------- | ---
| Bug fix?       | yes
| New feature?   | no
| Deprecations?  | no
| Documentation? | no
| Issues         | Fix #2552
| License        | MIT

Dragging a file over the drop zone makes `onDragEnter` reveal the input and hide the preview. Dropping a *different* file then fires `change`, `onInputChange` runs and restores the preview. Dropping the **same** file does not: Chrome fires no `change` event when the selection is unchanged, and `dragleave` does not fire either since the pointer never leaves the element. Nothing restores the preview, so the zone looks empty while a file is still selected.

The controller now also listens for `drop` and restores the preview when the input still holds a file. The check is deferred so it runs after `input.files` has settled and after any `change` event, which makes it a no-op when the browser did fire one.

Reproduced in Chrome before and after: with the published controller, the sequence pick, `dragenter`, `drop` leaves `preview: none` while `input.files.length` is 1; with this change it goes back to `preview: flex`. The added unit test covers the same sequence and fails without the fix.

The e2e application only had a `multiple` Dropzone page, so this adds a single-file one at `/ux-dropzone/single` and registers it as an example, which is what made the browser check possible.

Commits
-------

69669d3 [Dropzone] Fix the drop zone appearing empty when the same file is dropped again

Author: Kocal

apps/e2e/src/Controller/DropzoneController.php

@@ -28,6 +28,27 @@ public function index(): Response
         ]);
     }
 
+    #[Route('/single', name: 'single')]
+    public function single(Request $request): Response
+    {
+        $form = $this->createFormBuilder()
+            ->add('photo', DropzoneType::class, ['required' => false])
+            ->getForm()
+        ;
+
+        $form->handleRequest($request);
+
+        $uploadedFile = null;
+        if ($form->isSubmitted() && $form->isValid()) {
+            $uploadedFile = $form->get('photo')->getData()?->getClientOriginalName();
+        }
+
+        return $this->render('ux_dropzone/single.html.twig', [
+            'form' => $form,
+            'uploadedFile' => $uploadedFile,
+        ]);
+    }
+
     #[Route('/multiple', name: 'multiple')]
     public function multiple(Request $request): Response
     {

apps/e2e/src/Repository/ExampleRepository.php

@@ -37,6 +37,7 @@ public function __construct()
             new Example(UxPackage::ChartJs, 'Pie chart with options', 'A pie chart with custom options to control the appearance and behavior.', 'app_ux_chartjs_pie_with_options'),
             new Example(UxPackage::Cropperjs, 'Image cropper', 'Crop an image with Cropper.js using default options.', 'app_ux_cropperjs_crop'),
             new Example(UxPackage::Cropperjs, 'Image cropper with aspect ratio', 'Crop an image with a fixed 16:9 aspect ratio constraint.', 'app_ux_cropperjs_crop_with_aspect_ratio'),
+            new Example(UxPackage::Dropzone, 'Single file upload', 'Upload one file, with a preview and a clear button.', 'app_ux_dropzone_single'),
             new Example(UxPackage::Dropzone, 'Multiple file upload', 'Upload several files at once: accumulate across picks, preview each, and remove individually.', 'app_ux_dropzone_multiple'),
             new Example(UxPackage::LiveComponent, 'Examples filtering', 'On this page, you can filter all examples by query terms, and observe how the UI and URLs update during and after processing.', 'app_home'),
             new Example(UxPackage::LiveComponent, 'Counter', 'A basic counter that you can increment or decrement.', 'app_ux_live_component_counter'),

apps/e2e/templates/ux_dropzone/single.html.twig

@@ -0,0 +1,20 @@
+{% extends 'example.html.twig' %}
+
+{% block example %}
+    <div class="row">
+        <div class="col-md-8 mx-auto">
+            {% if uploadedFile %}
+                <div class="alert alert-success mb-4" id="upload-success">
+                    Uploaded: {{ uploadedFile }}
+                </div>
+            {% endif %}
+
+            {{ form_start(form, {attr: {'data-turbo': 'false'}}) }}
+                {{ form_row(form.photo) }}
+                <div class="mt-3">
+                    <button type="submit" class="btn btn-primary" id="upload-submit">Upload</button>
+                </div>
+            {{ form_end(form) }}
+        </div>
+    </div>
+{% endblock %}

src/Dropzone/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Add support for multiple file uploads: accumulate files across selections, preview each file, and remove them individually
 - Add a `remove_label` option to label the per-file remove button in `multiple` mode
+- Fix the drop zone appearing empty after dropping the very same file again, which Chrome reports without firing a `change` event
 
 ## 3.0.0
 

src/Dropzone/assets/dist/controller.d.ts

@@ -27,6 +27,7 @@ declare class export_default extends Controller {
   _populateImagePreview(target: HTMLElement, file: Blob): void;
   onDragEnter(): void;
   onDragLeave(event: any): void;
+  onDrop(): void;
   private connectMultiple;
   onMultipleChange(): void;
   private syncMultiple;

src/Dropzone/assets/dist/controller.js

@@ -5,6 +5,7 @@ var _Class = class extends Controller {
 		this.onInputChange = this.onInputChange.bind(this);
 		this.onDragEnter = this.onDragEnter.bind(this);
 		this.onDragLeave = this.onDragLeave.bind(this);
+		this.onDrop = this.onDrop.bind(this);
 		this.onMultipleChange = this.onMultipleChange.bind(this);
 	}
 	connect() {
@@ -18,6 +19,7 @@ var _Class = class extends Controller {
 		this.inputTarget.addEventListener("change", this.onInputChange);
 		this.element.addEventListener("dragenter", this.onDragEnter);
 		this.element.addEventListener("dragleave", this.onDragLeave);
+		this.element.addEventListener("drop", this.onDrop);
 		this.dispatchEvent("connect");
 	}
 	disconnect() {
@@ -29,6 +31,7 @@ var _Class = class extends Controller {
 		this.inputTarget.removeEventListener("change", this.onInputChange);
 		this.element.removeEventListener("dragenter", this.onDragEnter);
 		this.element.removeEventListener("dragleave", this.onDragLeave);
+		this.element.removeEventListener("drop", this.onDrop);
 	}
 	clear() {
 		this.inputTarget.value = "";
@@ -73,6 +76,14 @@ var _Class = class extends Controller {
 			this.previewTarget.style.display = "block";
 		}
 	}
+	onDrop() {
+		setTimeout(() => {
+			if (!this.inputTarget.files?.length) return;
+			this.inputTarget.style.display = "none";
+			this.placeholderTarget.style.display = "none";
+			this.previewTarget.style.display = "flex";
+		});
+	}
 	connectMultiple() {
 		this.dataTransfer = new DataTransfer();
 		for (const file of Array.from(this.inputTarget.files ?? [])) this.dataTransfer.items.add(file);

src/Dropzone/assets/src/controller.ts

@@ -44,6 +44,7 @@ export default class extends Controller {
         this.onInputChange = this.onInputChange.bind(this);
         this.onDragEnter = this.onDragEnter.bind(this);
         this.onDragLeave = this.onDragLeave.bind(this);
+        this.onDrop = this.onDrop.bind(this);
         this.onMultipleChange = this.onMultipleChange.bind(this);
     }
 
@@ -69,6 +70,9 @@ export default class extends Controller {
         // Add dragleave event listener
         this.element.addEventListener('dragleave', this.onDragLeave);
 
+        // Add drop event listener
+        this.element.addEventListener('drop', this.onDrop);
+
         this.dispatchEvent('connect');
     }
 
@@ -82,6 +86,7 @@ export default class extends Controller {
         this.inputTarget.removeEventListener('change', this.onInputChange);
         this.element.removeEventListener('dragenter', this.onDragEnter);
         this.element.removeEventListener('dragleave', this.onDragLeave);
+        this.element.removeEventListener('drop', this.onDrop);
     }
 
     clear() {
@@ -152,6 +157,21 @@ export default class extends Controller {
         }
     }
 
+    onDrop() {
+        // Chrome does not fire "change" when the very same file is picked again, so
+        // onInputChange never runs to undo what onDragEnter did and the zone looks empty
+        // while a file is still selected. Deferred so input.files and any "change" landed first.
+        setTimeout(() => {
+            if (!this.inputTarget.files?.length) {
+                return;
+            }
+
+            this.inputTarget.style.display = 'none';
+            this.placeholderTarget.style.display = 'none';
+            this.previewTarget.style.display = 'flex';
+        });
+    }
+
     // --- Multiple-file handling ------------------------------------------------
 
     private connectMultiple() {

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

@@ -169,6 +169,25 @@ describe('DropzoneController', () => {
         await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'none' }));
         await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'block' }));
     });
+
+    it('restores the preview when the same file is dropped again', async () => {
+        startStimulus();
+
+        const input = getByTestId(container, 'input') as HTMLInputElement;
+        const file = new File(['content'], 'a.txt', { type: 'text/plain' });
+        Object.defineProperty(input, 'files', { configurable: true, writable: true, value: [file] });
+
+        // Dragging over reveals the input and hides the preview
+        getByTestId(container, 'container').dispatchEvent(new Event('dragenter'));
+        await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'none' }));
+
+        // Chrome does not fire "change" when the very same file is picked again
+        getByTestId(container, 'container').dispatchEvent(new Event('drop', { bubbles: true }));
+
+        await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'none' }));
+        await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'none' }));
+        await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'flex' }));
+    });
 });
 
 describe('DropzoneController (multiple)', () => {