Adjust Dropzone tests, templates, and controller to align with updated UI logic for preview visibility and structure.

Author: Carlos Hernández

src/Dropzone/assets/dist/controller.js

@@ -131,7 +131,15 @@ var controller_default = class extends Controller {
     this.dispatch(name, { detail: payload, prefix: "dropzone" });
   }
 };
-controller_default.targets = ["input", "placeholder", "preview", "previewClearButton", "previewFilename", "previewImage", "previewContainer"];
+controller_default.targets = [
+  "input",
+  "placeholder",
+  "preview",
+  "previewClearButton",
+  "previewFilename",
+  "previewImage",
+  "previewContainer"
+];
 export {
   controller_default as default
 };

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

@@ -102,9 +102,9 @@ describe('DropzoneController', () => {
 
         button.click();
 
-        await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'block' }));
-        await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'block' }));
-        await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'none' }));
+        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: 'block' }));
 
         // The event should have been dispatched
         expect(dispatched).toBe(true);
@@ -160,8 +160,8 @@ describe('DropzoneController', () => {
         getByTestId(container, 'container').dispatchEvent(dragLeaveEvent);
 
         // Check that the input and placeholder are hidden, and preview shown
-        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: 'block' }));
+        await waitFor(() => expect(getByTestId(container, 'input')).toHaveStyle({ display: 'block' }));
+        await waitFor(() => expect(getByTestId(container, 'placeholder')).toHaveStyle({ display: 'block' }));
+        await waitFor(() => expect(getByTestId(container, 'preview')).toHaveStyle({ display: 'none' }));
     });
 });

src/Dropzone/templates/form_theme.html.twig

@@ -10,15 +10,18 @@
                 {{- translation_domain is same as(false) ? attr.placeholder : attr.placeholder|trans({}, translation_domain) -}}
             {%- endif -%}
         </div>
-
-        <div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
-            <button class="dropzone-preview-button" type="button"
-                    data-symfony--ux-dropzone--dropzone-target="previewClearButton"></button>
-
-            <div class="dropzone-preview-image" style="display: none"
-                 data-symfony--ux-dropzone--dropzone-target="previewImage"></div>
-
-            <div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
+        <div class="dropzone-preview-container" data-symfony--ux-dropzone--dropzone-target="previewContainer">
+            <div class="dropzone-preview" data-symfony--ux-dropzone--dropzone-target="preview" style="display: none">
+                <div class="dropzone-preview-image" style="display: none"
+                     data-symfony--ux-dropzone--dropzone-target="previewImage"></div>
+                <div data-symfony--ux-dropzone--dropzone-target="previewFilename" class="dropzone-preview-filename"></div>
+                <button class="dropzone-preview-button" type="button"
+                        data-symfony--ux-dropzone--dropzone-target="previewClearButton"
+                        data-symfony--ux-dropzone--dropzone-filename-param="0"
+                        data-action="symfony--ux-dropzone--dropzone#clear"
+                ></button>
+            </div>
         </div>
+
     </div>
 {%- endblock %}