Add basic support for thumbnails for the file element

diff --git a/ts/WoltLabSuite/Core/Component/Attachment/List.ts b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
index 6aaa6e219adead802eeafd06e072a05d9e814d0e..36f31a69935ef42d7b12fe8d9da0a13197d935b5 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Attachment/List.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
@@ -1,14 +1,19 @@
 import WoltlabCoreFileElement from "../File/woltlab-core-file";
 
 function upload(fileList: HTMLElement, file: WoltlabCoreFileElement): void {
-  // TODO: Any sort of upload indicator, meter, spinner, whatever?
   const element = document.createElement("li");
   element.classList.add("attachment__list__item");
   element.append(file);
   fileList.append(element);
 
   void file.ready.then(() => {
-    // TODO: Do something?
+    const thumbnail = file.thumbnails.find((thumbnail) => {
+      return thumbnail.identifier === "tiny";
+    });
+
+    if (thumbnail !== undefined) {
+      file.thumbnail = thumbnail;
+    }
   });
 }
 
@@ -30,7 +35,6 @@ export function setup(container: HTMLElement): void {
   }
 
   uploadButton.addEventListener("uploadStart", (event: CustomEvent<WoltlabCoreFileElement>) => {
-    // TODO: How do we keep track of the files being uploaded?
     upload(fileList!, event.detail);
   });
 }

diff --git a/ts/WoltLabSuite/Core/Component/File/woltlab-core-file.ts b/ts/WoltLabSuite/Core/Component/File/woltlab-core-file.ts
index 0aadb05ea1a099a4de283341f3fc9335225064d5..3f66d707a1d0f99c0dc9faecf5af59dc198cfb16 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/File/woltlab-core-file.ts
+++ b/ts/WoltLabSuite/Core/Component/File/woltlab-core-file.ts
@@ -227,6 +227,14 @@ export class WoltlabCoreFileElement extends HTMLElement {
     this.#readyResolve();
   }
 
+  set thumbnail(thumbnail: Thumbnail) {
+    if (!this.#thumbnails.includes(thumbnail)) {
+      return;
+    }
+
+    this.#replaceWithImage(thumbnail.link);
+  }
+
   get thumbnails(): Thumbnail[] {
     return [...this.#thumbnails];
   }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
index 24f55c43e0bd36b47289d59af34262b1f31774b0..af4e0241f576f3e80c51f90f93613d7dd1005d4d 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Attachment/List.js
@@ -3,13 +3,17 @@ define(["require", "exports"], function (require, exports) {
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.setup = void 0;
     function upload(fileList, file) {
-        // TODO: Any sort of upload indicator, meter, spinner, whatever?
         const element = document.createElement("li");
         element.classList.add("attachment__list__item");
         element.append(file);
         fileList.append(element);
         void file.ready.then(() => {
-            // TODO: Do something?
+            const thumbnail = file.thumbnails.find((thumbnail) => {
+                return thumbnail.identifier === "tiny";
+            });
+            if (thumbnail !== undefined) {
+                file.thumbnail = thumbnail;
+            }
         });
     }
     function setup(container) {
@@ -28,7 +32,6 @@ define(["require", "exports"], function (require, exports) {
             uploadButton.insertAdjacentElement("afterend", fileList);
         }
         uploadButton.addEventListener("uploadStart", (event) => {
-            // TODO: How do we keep track of the files being uploaded?
             upload(fileList, event.detail);
         });
     }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/woltlab-core-file.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/woltlab-core-file.js
index cdae36bada5cb0aefd7a7e2b0f97a035378b9162..5339e47a56eb1a81a699e5a4de905bf06389565f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/woltlab-core-file.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/woltlab-core-file.js
@@ -180,6 +180,12 @@ define(["require", "exports"], function (require, exports) {
             this.#rebuildElement();
             this.#readyResolve();
         }
+        set thumbnail(thumbnail) {
+            if (!this.#thumbnails.includes(thumbnail)) {
+                return;
+            }
+            this.#replaceWithImage(thumbnail.link);
+        }
         get thumbnails() {
             return [...this.#thumbnails];
         }