Fix(web, web-twig): FileUploader changed selectors in JS plugin

- Changed class selectors for data selectors in JS plugin
lmc-eu · Nov 8, 2023 · 5ec58e0 · 5ec58e0
1 parent a7175d8
commit 5ec58e0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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">