From 5ec58e00a83aae68fafee6c624594174e43ade23 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Tue, 7 Nov 2023 20:21:34 +0100
Subject: [PATCH] Fix(web, web-twig): FileUploader changed selectors in JS
 plugin

- Changed class selectors for data selectors in JS plugin
---
 .../components/FileUploader/FileUploaderAttachment.twig   | 8 +++++++-
 packages/web/src/js/FileUploader.ts                       | 5 +++--
 packages/web/src/scss/components/FileUploader/index.html  | 2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig
index c1aed104af..9003d356c4 100644
--- a/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig
+++ b/packages/web-twig/src/Resources/components/FileUploader/FileUploaderAttachment.twig
@@ -35,7 +35,13 @@
 >
     {% if _generateImagePreview or _imagePreview %}
         <span class="{{ _imageClassName }}" data-spirit-element="attachment-image">
-            <img src="{{ _imagePreview }}" {{ _imageObjectFitAttr | raw }} width="54" height="54" alt="{{- _fileName -}}" />
+            <img 
+                src="{{ _imagePreview }}" 
+                {{ _imageObjectFitAttr | raw }} 
+                width="54" 
+                height="54" 
+                alt="{{- _fileName -}}" 
+            />
         </span>
     {% endif %}
     {% if not _imagePreview %}
diff --git a/packages/web/src/js/FileUploader.ts b/packages/web/src/js/FileUploader.ts
index 341ad24f1b..79aa2837cd 100644
--- a/packages/web/src/js/FileUploader.ts
+++ b/packages/web/src/js/FileUploader.ts
@@ -20,6 +20,7 @@ const LIST_ELEMENT_SELECTOR = '[data-spirit-element="list"]';
 const DROP_ZONE_ELEMENT_SELECTOR = '[data-spirit-element="dropZone"]';
 const TEMPLATE_ELEMENT_SELECTOR = '[data-spirit-snippet="item"]';
 const TEMPLATE_ELEMENT_SLOT_NAME = 'data-spirit-populate-field';
+const ATTACHMENT_IMAGE = '[data-spirit-element="attachment-image"]';
 const DATA_DISMISS_ATTRIBUTE = 'data-spirit-dismiss';
 const DATA_ELEMENT_VALIDATION_TEXT = 'validation_text';
 const SELECTOR_VALIDATION_TEXT = `[data-spirit-element="${DATA_ELEMENT_VALIDATION_TEXT}"]`;
@@ -265,7 +266,7 @@ class FileUploader extends BaseComponent {
     const itemButton = snippet.querySelector(`[${TEMPLATE_ELEMENT_SLOT_NAME}="button"]`);
     const hasImagePreview = Boolean((item as HTMLElement)?.dataset?.spiritImagepreview);
     const AttachmentSvgIcon = item?.querySelector('svg');
-    const AttachmentPreviewImage = snippet.querySelector('.FileUploaderAttachment__image');
+    const AttachmentPreviewImage = item?.querySelector(ATTACHMENT_IMAGE);
     const isFileImg = file.type.includes('image');
 
     if (hasImagePreview && isFileImg) {
@@ -379,7 +380,7 @@ class FileUploader extends BaseComponent {
 
       this.fileQueue.set(name, newValue);
 
-      const itemImgElement = SelectorEngine.findOne(`#${name} .FileUploaderAttachment__image img`) as HTMLImageElement;
+      const itemImgElement = SelectorEngine.findOne(`#${name} ${ATTACHMENT_IMAGE} img`) as HTMLImageElement;
 
       if (meta && itemImgElement && FileUploader.isCoordsInMeta(meta)) {
         const previewHeight = IMAGE_PREVIEW_HEIGHT;
diff --git a/packages/web/src/scss/components/FileUploader/index.html b/packages/web/src/scss/components/FileUploader/index.html
index d01c58f48b..66e9b1b5bf 100644
--- a/packages/web/src/scss/components/FileUploader/index.html
+++ b/packages/web/src/scss/components/FileUploader/index.html
@@ -826,7 +826,7 @@ <h2 class="docs-Heading">FileUploader with Meta Data</h2>
       <!-- FileUploaderAttachment template: start -->
       <template data-spirit-snippet="item">
         <li class="FileUploaderAttachment" data-spirit-populate-field="item" data-spirit-imagePreview="true">
-          <span class="FileUploaderAttachment__image">
+          <span class="FileUploaderAttachment__image" data-spirit-element="attachment-image">
             <img src="" width="54" height="54" alt="" />
           </span>
           <svg width="24" height="24" aria-hidden="true">