From b49b9321fc0500b6b238621283d0772f0b8b97a9 Mon Sep 17 00:00:00 2001 From: lacatoire Date: Thu, 7 May 2026 15:46:54 +0200 Subject: [PATCH] Initialise FileUploadField only on the newly added collection item 'ea.collection.item-added' was re-running the document-wide query for file upload inputs, which double-bound the change/click handlers on every already-processed field and could prevent the new field from displaying selected files reliably (Bootstrap markup variations exposed this further). Scope the query to event.detail.newElement, and guard each input with a data-ea-fileupload-initialized flag so re-entry is safe. Fixes #6637 --- assets/js/field-file-upload.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/assets/js/field-file-upload.js b/assets/js/field-file-upload.js index 46a9874ab5..1cae6f8270 100644 --- a/assets/js/field-file-upload.js +++ b/assets/js/field-file-upload.js @@ -1,13 +1,23 @@ import { toggleVisibilityClasses } from './helpers'; -const eaFileUploadHandler = (event) => { - document.querySelectorAll('.ea-fileupload input[type="file"]').forEach((fileUploadElement) => { +const initFileUploadFields = (root) => { + root.querySelectorAll('.ea-fileupload input[type="file"]').forEach((fileUploadElement) => { + if (fileUploadElement.dataset.eaFileuploadInitialized === '1') { + return; + } + fileUploadElement.dataset.eaFileuploadInitialized = '1'; new FileUploadField(fileUploadElement); }); }; -window.addEventListener('DOMContentLoaded', eaFileUploadHandler); -document.addEventListener('ea.collection.item-added', eaFileUploadHandler); +window.addEventListener('DOMContentLoaded', () => initFileUploadFields(document)); +document.addEventListener('ea.collection.item-added', (event) => { + // only initialise the file upload fields contained in the newly added collection item: + // re-running the query on the whole document would re-attach listeners to already + // processed fields and double-fire their handlers (see #6637). The dataset flag + // already protects against double-init if `event.detail.newElement` is missing. + initFileUploadFields(event?.detail?.newElement ?? document); +}); class FileUploadField { #fieldContainerElement;