Notify only when the value has really changed.

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index b618c51c0c654ab7de37570c9830ccb8156ac534..724d6fd748d943f30f509e374d84c59e92a332e8 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -88,7 +88,7 @@ export class FileProcessor {
     this.#fileInput = this.#uploadButton.querySelector<HTMLInputElement>('input[type="file"]')!;
 
     this.#container.querySelectorAll<WoltlabCoreFileElement>("woltlab-core-file").forEach((element) => {
-      this.#registerFile(element, element.parentElement);
+      this.#registerFile(element, element.parentElement, false);
     });
 
     fileProcessors.set(fieldId, this);
@@ -168,7 +168,7 @@ export class FileProcessor {
       };
       const cancelEventListener = () => {
         this.#uploadButton.dataset.context = oldContext;
-        this.#registerFile(this.#replaceElement!);
+        this.#registerFile(this.#replaceElement!, null, false);
         this.#replaceElement = undefined;
         this.#uploadResolve = undefined;
         this.#fileInput.removeEventListener("change", changeEventListener);
@@ -223,7 +223,7 @@ export class FileProcessor {
     const cropCancelledEvent = () => {
       this.#uploadResolve = undefined;
       this.#uploadButton.dataset.context = oldContext;
-      this.#registerFile(this.#replaceElement!);
+      this.#registerFile(this.#replaceElement!, null, false);
       this.#replaceElement = undefined;
     };
 
@@ -261,7 +261,11 @@ export class FileProcessor {
     }
   }
 
-  #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): void {
+  #registerFile(
+    element: WoltlabCoreFileElement,
+    container: HTMLElement | null = null,
+    notifyCallback: boolean = true,
+  ): void {
     if (container === null) {
       if (this.#useBigPreview) {
         container = this.#container.querySelector(".fileUpload__preview");
@@ -290,11 +294,11 @@ export class FileProcessor {
           void deleteFile(this.#replaceElement.fileId!);
           this.#replaceElement = undefined;
         }
-        this.#fileInitializationCompleted(element, container!);
+        this.#fileInitializationCompleted(element, container!, notifyCallback);
       })
       .catch((reason) => {
         if (this.#replaceElement !== undefined) {
-          this.#registerFile(this.#replaceElement);
+          this.#registerFile(this.#replaceElement, null, false);
           this.#replaceElement = undefined;
 
           if (this.#useBigPreview) {
@@ -313,7 +317,11 @@ export class FileProcessor {
       });
   }
 
-  #fileInitializationCompleted(element: WoltlabCoreFileElement, container: HTMLElement): void {
+  #fileInitializationCompleted(
+    element: WoltlabCoreFileElement,
+    container: HTMLElement,
+    notifyCallback: boolean = true,
+  ): void {
     if (this.#useBigPreview) {
       setThumbnail(
         element,
@@ -361,7 +369,9 @@ export class FileProcessor {
 
     this.addButtons(container, element);
 
-    notifyValueChange(this.#fieldId, this.values);
+    if (notifyCallback) {
+      notifyValueChange(this.#fieldId, this.values);
+    }
   }
 
   get values(): undefined | number | Set<number> {

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 e9ce9108d5c507ae10aeaaec8b7702016b693bbc..f32fe5bbc949c3165b596c3ff5c88f53b6998fc6 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
@@ -57,7 +57,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             });
             this.#fileInput = this.#uploadButton.querySelector('input[type="file"]');
             this.#container.querySelectorAll("woltlab-core-file").forEach((element) => {
-                this.#registerFile(element, element.parentElement);
+                this.#registerFile(element, element.parentElement, false);
             });
             fileProcessors.set(fieldId, this);
         }
@@ -124,7 +124,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 };
                 const cancelEventListener = () => {
                     this.#uploadButton.dataset.context = oldContext;
-                    this.#registerFile(this.#replaceElement);
+                    this.#registerFile(this.#replaceElement, null, false);
                     this.#replaceElement = undefined;
                     this.#uploadResolve = undefined;
                     this.#fileInput.removeEventListener("change", changeEventListener);
@@ -170,7 +170,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             const cropCancelledEvent = () => {
                 this.#uploadResolve = undefined;
                 this.#uploadButton.dataset.context = oldContext;
-                this.#registerFile(this.#replaceElement);
+                this.#registerFile(this.#replaceElement, null, false);
                 this.#replaceElement = undefined;
             };
             this.#uploadButton.addEventListener("cancel", cropCancelledEvent, { once: true });
@@ -202,7 +202,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 element.parentElement.parentElement.remove();
             }
         }
-        #registerFile(element, container = null) {
+        #registerFile(element, container = null, notifyCallback = true) {
             if (container === null) {
                 if (this.#useBigPreview) {
                     container = this.#container.querySelector(".fileUpload__preview");
@@ -229,11 +229,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                     void (0, DeleteFile_1.deleteFile)(this.#replaceElement.fileId);
                     this.#replaceElement = undefined;
                 }
-                this.#fileInitializationCompleted(element, container);
+                this.#fileInitializationCompleted(element, container, notifyCallback);
             })
                 .catch((reason) => {
                 if (this.#replaceElement !== undefined) {
-                    this.#registerFile(this.#replaceElement);
+                    this.#registerFile(this.#replaceElement, null, false);
                     this.#replaceElement = undefined;
                     if (this.#useBigPreview) {
                         // `this.#replaceElement` need a new container, otherwise the element will be marked as erroneous, too.
@@ -249,7 +249,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 (0, Helper_1.removeUploadProgress)(container);
             });
         }
-        #fileInitializationCompleted(element, container) {
+        #fileInitializationCompleted(element, container, notifyCallback = true) {
             if (this.#useBigPreview) {
                 setThumbnail(element, element.thumbnails.find((thumbnail) => thumbnail.identifier === this.#thumbnailSize), true);
             }
@@ -286,7 +286,9 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             input.value = element.fileId.toString();
             container.append(input);
             this.addButtons(container, element);
-            notifyValueChange(this.#fieldId, this.values);
+            if (notifyCallback) {
+                notifyValueChange(this.#fieldId, this.values);
+            }
         }
         get values() {
             if (this.#singleFileUpload) {