Remove async from `#registerFile()`
authorCyperghost <olaf_schmitz_1@t-online.de>
Wed, 26 Jun 2024 09:48:03 +0000 (11:48 +0200)
committerCyperghost <olaf_schmitz_1@t-online.de>
Wed, 26 Jun 2024 09:48:03 +0000 (11:48 +0200)
ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
wcfsetup/install/files/js/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.js

index 8661f6b9356c48579d1d45d7681bf5b0c73ae1d4..55811033499acdd62a2c18e7b24e38f1ef31d26a 100644 (file)
@@ -45,12 +45,12 @@ export class FileProcessor {
 
     this.#uploadButton = this.#container.querySelector("woltlab-core-file-upload") as WoltlabCoreFileUploadElement;
     this.#uploadButton.addEventListener("uploadStart", (event: CustomEvent<WoltlabCoreFileElement>) => {
-      void this.#registerFile(event.detail);
+      this.#registerFile(event.detail);
     });
     this.#fileInput = this.#uploadButton.shadowRoot!.querySelector<HTMLInputElement>('input[type="file"]')!;
 
     this.#container.querySelectorAll<WoltlabCoreFileElement>("woltlab-core-file").forEach((element) => {
-      void this.#registerFile(element, element.parentElement);
+      this.#registerFile(element, element.parentElement);
     });
   }
 
@@ -176,7 +176,7 @@ export class FileProcessor {
       };
       const cancelEventListener = () => {
         this.#uploadButton.dataset.context = oldContext;
-        void this.#registerFile(this.#replaceElement!);
+        this.#registerFile(this.#replaceElement!);
         this.#replaceElement = undefined;
         this.#fileInput.removeEventListener("change", changeEventListener);
       };
@@ -231,7 +231,7 @@ export class FileProcessor {
     element.querySelector(".fileList__item__progress")?.remove();
   }
 
-  async #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): Promise<void> {
+  #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): void {
     if (container === null) {
       if (this.showBigPreview) {
         container = this.#container.querySelector(".fileUpload__preview");
@@ -269,36 +269,40 @@ export class FileProcessor {
       container.append(fileSize);
     }
 
-    try {
-      this.#trackUploadProgress(container, element);
-      await element.ready;
+    this.#trackUploadProgress(container, element);
 
-      if (this.#replaceElement !== undefined) {
-        await deleteFile(this.#replaceElement.fileId!);
-        this.#replaceElement = undefined;
-      }
-    } catch (reason) {
-      // reinsert the element and show an error message
-      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);
-
-          container = tmpContainer;
+    element.ready
+      .then(() => {
+        if (this.#replaceElement !== undefined) {
+          void deleteFile(this.#replaceElement.fileId!);
+          this.#replaceElement = undefined;
         }
-      }
-      this.#markElementUploadHasFailed(container, element, reason);
-      return;
-    } finally {
-      this.#removeUploadProgress(container);
-    }
+        this.#fileInitializationCompleted(element, container!);
+      })
+      .catch((reason) => {
+        // reinsert the element and show an error message
+        if (this.#replaceElement !== undefined) {
+          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);
+
+            container = tmpContainer;
+          }
+        }
+        this.#markElementUploadHasFailed(container!, element, reason);
+      })
+      .finally(() => {
+        this.#removeUploadProgress(container!);
+      });
+  }
 
+  #fileInitializationCompleted(element: WoltlabCoreFileElement, container: HTMLElement): void {
     if (this.showBigPreview) {
       element.dataset.previewUrl = element.link!;
       element.unbounded = true;
index 94700a0ca40dbf067d23c9b75c71ac67497f4c24..47edaa86aa4b18198fcc8ce9265d782249afc1cc 100644 (file)
@@ -29,11 +29,11 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             }
             this.#uploadButton = this.#container.querySelector("woltlab-core-file-upload");
             this.#uploadButton.addEventListener("uploadStart", (event) => {
-                void this.#registerFile(event.detail);
+                this.#registerFile(event.detail);
             });
             this.#fileInput = this.#uploadButton.shadowRoot.querySelector('input[type="file"]');
             this.#container.querySelectorAll("woltlab-core-file").forEach((element) => {
-                void this.#registerFile(element, element.parentElement);
+                this.#registerFile(element, element.parentElement);
             });
         }
         get classPrefix() {
@@ -139,7 +139,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 };
                 const cancelEventListener = () => {
                     this.#uploadButton.dataset.context = oldContext;
-                    void this.#registerFile(this.#replaceElement);
+                    this.#registerFile(this.#replaceElement);
                     this.#replaceElement = undefined;
                     this.#fileInput.removeEventListener("change", changeEventListener);
                 };
@@ -184,7 +184,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             element.classList.remove("fileProcessor__item--uploading");
             element.querySelector(".fileList__item__progress")?.remove();
         }
-        async #registerFile(element, container = null) {
+        #registerFile(element, container = null) {
             if (container === null) {
                 if (this.showBigPreview) {
                     container = this.#container.querySelector(".fileUpload__preview");
@@ -217,18 +217,19 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 fileSize.textContent = (0, FileUtil_1.formatFilesize)(element.fileSize || parseInt(element.dataset.fileSize));
                 container.append(fileSize);
             }
-            try {
-                this.#trackUploadProgress(container, element);
-                await element.ready;
+            this.#trackUploadProgress(container, element);
+            element.ready
+                .then(() => {
                 if (this.#replaceElement !== undefined) {
-                    await (0, DeleteFile_1.deleteFile)(this.#replaceElement.fileId);
+                    void (0, DeleteFile_1.deleteFile)(this.#replaceElement.fileId);
                     this.#replaceElement = undefined;
                 }
-            }
-            catch (reason) {
+                this.#fileInitializationCompleted(element, container);
+            })
+                .catch((reason) => {
                 // reinsert the element and show an error message
                 if (this.#replaceElement !== undefined) {
-                    await this.#registerFile(this.#replaceElement);
+                    this.#registerFile(this.#replaceElement);
                     this.#replaceElement = undefined;
                     if (this.showBigPreview) {
                         // move the new uploaded file to his own container
@@ -240,11 +241,12 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                     }
                 }
                 this.#markElementUploadHasFailed(container, element, reason);
-                return;
-            }
-            finally {
+            })
+                .finally(() => {
                 this.#removeUploadProgress(container);
-            }
+            });
+        }
+        #fileInitializationCompleted(element, container) {
             if (this.showBigPreview) {
                 element.dataset.previewUrl = element.link;
                 element.unbounded = true;