Remove the other EventListener if one has been executed

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index 2aa0c626f1bf0125a353789d8d073320074d3be1..d2fb7be1549c52ab7ece30c2f5a7d7e253cfca99 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -130,22 +130,19 @@ export class FileProcessor {
       // if the upload is successful, delete the old file.
       this.#unregisterFile(element);
 
-      this.#fileInput.addEventListener(
-        "cancel",
-        () => {
-          this.#uploadButton.dataset.context = oldContext;
-          void this.#registerFile(this.#replaceElement!);
-          this.#replaceElement = undefined;
-        },
-        { once: true },
-      );
-      this.#fileInput.addEventListener(
-        "change",
-        () => {
-          this.#uploadButton.dataset.context = oldContext;
-        },
-        { once: true },
-      );
+      const changeEventListener = () => {
+        this.#uploadButton.dataset.context = oldContext;
+        this.#fileInput.removeEventListener("cancel", cancelEventListener);
+      };
+      const cancelEventListener = () => {
+        this.#uploadButton.dataset.context = oldContext;
+        void this.#registerFile(this.#replaceElement!);
+        this.#replaceElement = undefined;
+        this.#fileInput.removeEventListener("change", changeEventListener);
+      };
+
+      this.#fileInput.addEventListener("cancel", cancelEventListener, { once: true });
+      this.#fileInput.addEventListener("change", changeEventListener, { once: true });
       this.#fileInput.click();
     });
 
@@ -191,6 +188,16 @@ export class FileProcessor {
       if (this.#replaceElement !== undefined) {
         await this.#registerFile(this.#replaceElement);
         this.#replaceElement = undefined;
+
+        if (this.showBigPreview) {
+          // move the new uploaded file to his own container
+          // otherwise the file under `this.#replaceElement` will be marked as failed, too
+          const tmpContainer = document.createElement("div");
+          tmpContainer.append(element);
+          this.#uploadButton.insertAdjacentElement("afterend", tmpContainer);
+
+          elementContainer = tmpContainer;
+        }
       }
       this.#markElementUploadHasFailed(elementContainer, element, reason);
       return;

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
index 3ae8036e29fd2835d9eee886bfc4212cbd2f248f..6b3c386547c8b625be49e663b7e3511f38671897 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js
@@ -108,14 +108,18 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/A
                 // if the user cancels the dialog or the upload fails, reinsert the old elements and show an error message.
                 // if the upload is successful, delete the old file.
                 this.#unregisterFile(element);
-                this.#fileInput.addEventListener("cancel", () => {
+                const changeEventListener = () => {
+                    this.#uploadButton.dataset.context = oldContext;
+                    this.#fileInput.removeEventListener("cancel", cancelEventListener);
+                };
+                const cancelEventListener = () => {
                     this.#uploadButton.dataset.context = oldContext;
                     void this.#registerFile(this.#replaceElement);
                     this.#replaceElement = undefined;
-                }, { once: true });
-                this.#fileInput.addEventListener("change", () => {
-                    this.#uploadButton.dataset.context = oldContext;
-                }, { once: true });
+                    this.#fileInput.removeEventListener("change", changeEventListener);
+                };
+                this.#fileInput.addEventListener("cancel", cancelEventListener, { once: true });
+                this.#fileInput.addEventListener("change", changeEventListener, { once: true });
                 this.#fileInput.click();
             });
             const listItem = document.createElement("li");
@@ -159,6 +163,14 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/A
                 if (this.#replaceElement !== undefined) {
                     await this.#registerFile(this.#replaceElement);
                     this.#replaceElement = undefined;
+                    if (this.showBigPreview) {
+                        // move the new uploaded file to his own container
+                        // otherwise the file under `this.#replaceElement` will be marked as failed, too
+                        const tmpContainer = document.createElement("div");
+                        tmpContainer.append(element);
+                        this.#uploadButton.insertAdjacentElement("afterend", tmpContainer);
+                        elementContainer = tmpContainer;
+                    }
                 }
                 this.#markElementUploadHasFailed(elementContainer, element, reason);
                 return;