Add filename and filesize information

Add image viewer support

diff --git a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
index 6f2a15fab24c61bdd0891c805dba8bfc1a79cd53..e3d89dbbac22f8787d57f4a4a16f143ff10c1149 100644 (file)
--- a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
+++ b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
@@ -9,7 +9,7 @@
 {else}
        <ul class="fileUpload__fileList">
                {foreach from=$files item=file}
-                       <li>
+                       <li class="fileUpload__fileList__item">
                                {unsafe:$file->toHtmlElement()}
                        </li>
                {/foreach}

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index d2fb7be1549c52ab7ece30c2f5a7d7e253cfca99..fca641ebbe94168cf055b31752f5d61d04acdf0f 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -8,6 +8,8 @@
 import WoltlabCoreFileElement from "WoltLabSuite/Core/Component/File/woltlab-core-file";
 import { getPhrase } from "WoltLabSuite/Core/Language";
 import { deleteFile } from "WoltLabSuite/Core/Api/Files/DeleteFile";
+import { formatFilesize } from "WoltLabSuite/Core/FileUtil";
+import DomChangeListener from "WoltLabSuite/Core/Dom/Change/Listener";
 
 export class FileProcessor {
   readonly #container: HTMLElement;
@@ -176,6 +178,21 @@ export class FileProcessor {
       elementContainer.append(element);
     }
 
+    // add filename and filesize information
+    if (!this.showBigPreview) {
+      const filename = document.createElement("div");
+      filename.classList.add(this.classPrefix + "item__filename");
+      filename.textContent = element.filename || element.dataset.filename!;
+
+      elementContainer.append(filename);
+
+      const fileSize = document.createElement("div");
+      fileSize.classList.add(this.classPrefix + "item__fileSize");
+      fileSize.textContent = formatFilesize(element.fileSize || parseInt(element.dataset.fileSize!));
+
+      elementContainer.append(fileSize);
+    }
+
     try {
       await element.ready;
 
@@ -206,13 +223,37 @@ export class FileProcessor {
     if (this.showBigPreview) {
       element.dataset.previewUrl = element.link!;
       element.unbounded = true;
-    } else if (element.isImage()) {
-      const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
-      if (thumbnail !== undefined) {
-        element.thumbnail = thumbnail;
-      } else {
-        element.dataset.previewUrl = element.link!;
-        element.unbounded = false;
+    } else {
+      if (element.isImage()) {
+        const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
+        if (thumbnail !== undefined) {
+          element.thumbnail = thumbnail;
+        } else {
+          element.dataset.previewUrl = element.link!;
+          element.unbounded = false;
+        }
+
+        if (element.link !== undefined && element.filename !== undefined) {
+          const filenameLink = document.createElement("a");
+          filenameLink.href = element.link;
+          filenameLink.title = element.filename;
+          filenameLink.textContent = element.filename;
+          filenameLink.classList.add("jsImageViewer");
+
+          // insert a hidden image element that will be used by the image viewer as the preview image
+          const previewImage = document.createElement("img");
+          previewImage.src = thumbnail !== undefined ? thumbnail.link : element.link;
+          previewImage.alt = element.filename;
+          previewImage.style.display = "none";
+          previewImage.classList.add(this.classPrefix + "item__previewImage");
+          filenameLink.append(previewImage);
+
+          const filenameContainer = elementContainer.querySelector("." + this.classPrefix + "item__filename")!;
+          filenameContainer.innerHTML = "";
+          filenameContainer.append(filenameLink);
+
+          DomChangeListener.trigger();
+        }
       }
     }
 

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 6b3c386547c8b625be49e663b7e3511f38671897..f61abcdd883d589dc30675011fdafadffd85807e 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
@@ -4,10 +4,11 @@
  * @license   GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since     6.1
  */
-define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Api/Files/DeleteFile"], function (require, exports, Language_1, DeleteFile_1) {
+define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/Api/Files/DeleteFile", "WoltLabSuite/Core/FileUtil", "WoltLabSuite/Core/Dom/Change/Listener"], function (require, exports, tslib_1, Language_1, DeleteFile_1, FileUtil_1, Listener_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.FileProcessor = void 0;
+    Listener_1 = tslib_1.__importDefault(Listener_1);
     class FileProcessor {
         #container;
         #uploadButton;
@@ -151,6 +152,17 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/A
                 }
                 elementContainer.append(element);
             }
+            // add filename and filesize information
+            if (!this.showBigPreview) {
+                const filename = document.createElement("div");
+                filename.classList.add(this.classPrefix + "item__filename");
+                filename.textContent = element.filename || element.dataset.filename;
+                elementContainer.append(filename);
+                const fileSize = document.createElement("div");
+                fileSize.classList.add(this.classPrefix + "item__fileSize");
+                fileSize.textContent = (0, FileUtil_1.formatFilesize)(element.fileSize || parseInt(element.dataset.fileSize));
+                elementContainer.append(fileSize);
+            }
             try {
                 await element.ready;
                 if (this.#replaceElement !== undefined) {
@@ -179,14 +191,34 @@ define(["require", "exports", "WoltLabSuite/Core/Language", "WoltLabSuite/Core/A
                 element.dataset.previewUrl = element.link;
                 element.unbounded = true;
             }
-            else if (element.isImage()) {
-                const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
-                if (thumbnail !== undefined) {
-                    element.thumbnail = thumbnail;
-                }
-                else {
-                    element.dataset.previewUrl = element.link;
-                    element.unbounded = false;
+            else {
+                if (element.isImage()) {
+                    const thumbnail = element.thumbnails.find((thumbnail) => thumbnail.identifier === "tiny");
+                    if (thumbnail !== undefined) {
+                        element.thumbnail = thumbnail;
+                    }
+                    else {
+                        element.dataset.previewUrl = element.link;
+                        element.unbounded = false;
+                    }
+                    if (element.link !== undefined && element.filename !== undefined) {
+                        const filenameLink = document.createElement("a");
+                        filenameLink.href = element.link;
+                        filenameLink.title = element.filename;
+                        filenameLink.textContent = element.filename;
+                        filenameLink.classList.add("jsImageViewer");
+                        // insert a hidden image element that will be used by the image viewer as the preview image
+                        const previewImage = document.createElement("img");
+                        previewImage.src = thumbnail !== undefined ? thumbnail.link : element.link;
+                        previewImage.alt = element.filename;
+                        previewImage.style.display = "none";
+                        previewImage.classList.add(this.classPrefix + "item__previewImage");
+                        filenameLink.append(previewImage);
+                        const filenameContainer = elementContainer.querySelector("." + this.classPrefix + "item__filename");
+                        filenameContainer.innerHTML = "";
+                        filenameContainer.append(filenameLink);
+                        Listener_1.default.trigger();
+                    }
                 }
             }
             const input = document.createElement("input");