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

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

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/web/src/js/FileUploader.ts b/packages/web/src/js/FileUploader.ts
@@ -265,7 +265,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('[data-spirit-element="attachment-image"]');
     const isFileImg = file.type.includes('image');
 
     if (hasImagePreview && isFileImg) {
@@ -379,7 +379,9 @@ class FileUploader extends BaseComponent {
 
       this.fileQueue.set(name, newValue);
 
-      const itemImgElement = SelectorEngine.findOne(`#${name} .FileUploaderAttachment__image img`) as HTMLImageElement;
+      const itemImgElement = SelectorEngine.findOne(
+        `#${name} [data-spirit-element="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">