Add the new variable `FileProcessorFormField::$bigPreview` with getter and setter.

This can be used to set whether the Big Preview is used for images. The big preview can only be used for images.

diff --git a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
index 442f8b62f8ce4d069e671d5513bb900428e0c7db..b4dba63d9d869bed08d07da8fed385f641d8d3d7 100644 (file)
--- a/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
+++ b/com.woltlab.wcf/templates/shared_fileProcessorFormField.tpl
@@ -1,7 +1,7 @@
 {unsafe:$fileProcessorHtmlElement}
 
 {assign var="files" value=$field->getFiles()}
-{if $field->isSingleFileUpload() && $imageOnly}
+{if $field->isBigPreview()}
        <div class="fileUpload__preview">
                {if $field->getValue()}
                        {assign var="file" value=$files|reset}
@@ -23,7 +23,7 @@
                new FileProcessor(
                        '{unsafe:$field->getPrefixedId()|encodeJS}',
                        {if $field->isSingleFileUpload()}true{else}false{/if},
-                       {if $imageOnly}true{else}false{/if},
+                       {if $field->isBigPreview()}true{else}false{/if},
                        [{implode from=$actionButtons item=actionButton}{
                                title: '{unsafe:$actionButton['title']|encodeJS}',
                                icon: {if $actionButton['icon'] === null}undefined{else}'{unsafe:$actionButton['icon']->toHtml()|encodeJS}'{/if},

diff --git a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
index bcd7f630cd6917071f9b4df27dc2912dfd0ba9c7..42ec8fd86d1ed813f8c0e5380457a2721e759b0e 100644 (file)
--- a/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
+++ b/ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts
@@ -32,7 +32,7 @@ export class FileProcessor {
   readonly #fieldId: string;
   #replaceElement: WoltlabCoreFileElement | undefined = undefined;
   readonly #fileInput: HTMLInputElement;
-  readonly #imageOnly: boolean;
+  readonly #useBigPreview: boolean;
   readonly #singleFileUpload: boolean;
   readonly #extraButtons: ExtraButton[];
   #uploadResolve: undefined | (() => void);
@@ -40,11 +40,11 @@ export class FileProcessor {
   constructor(
     fieldId: string,
     singleFileUpload: boolean = false,
-    imageOnly: boolean = false,
+    useBigPreview: boolean = false,
     extraButtons: ExtraButton[] = [],
   ) {
     this.#fieldId = fieldId;
-    this.#imageOnly = imageOnly;
+    this.#useBigPreview = useBigPreview;
     this.#singleFileUpload = singleFileUpload;
     this.#extraButtons = extraButtons;
 
@@ -71,11 +71,7 @@ export class FileProcessor {
   }
 
   get classPrefix(): string {
-    return this.showBigPreview ? "fileUpload__preview__" : "fileList__";
-  }
-
-  get showBigPreview(): boolean {
-    return this.#singleFileUpload && this.#imageOnly;
+    return this.#useBigPreview ? "fileUpload__preview__" : "fileList__";
   }
 
   protected addButtons(container: HTMLElement, element: WoltlabCoreFileElement): void {
@@ -189,7 +185,7 @@ export class FileProcessor {
   }
 
   #unregisterFile(element: WoltlabCoreFileElement): void {
-    if (this.showBigPreview) {
+    if (this.#useBigPreview) {
       element.parentElement!.innerHTML = "";
     } else {
       element.parentElement!.parentElement!.remove();
@@ -198,7 +194,7 @@ export class FileProcessor {
 
   #registerFile(element: WoltlabCoreFileElement, container: HTMLElement | null = null): void {
     if (container === null) {
-      if (this.showBigPreview) {
+      if (this.#useBigPreview) {
         container = this.#container.querySelector(".fileUpload__preview");
         if (container === null) {
           container = document.createElement("div");
@@ -213,7 +209,7 @@ export class FileProcessor {
       }
     }
 
-    if (!this.showBigPreview) {
+    if (!this.#useBigPreview) {
       insertFileInformation(container, element);
     }
 
@@ -232,7 +228,7 @@ export class FileProcessor {
           this.#registerFile(this.#replaceElement);
           this.#replaceElement = undefined;
 
-          if (this.showBigPreview) {
+          if (this.#useBigPreview) {
             // `this.#replaceElement` need a new container, otherwise the element will be marked as erroneous, too.
             const tmpContainer = document.createElement("div");
             tmpContainer.append(element);
@@ -249,7 +245,7 @@ export class FileProcessor {
   }
 
   #fileInitializationCompleted(element: WoltlabCoreFileElement, container: HTMLElement): void {
-    if (this.showBigPreview) {
+    if (this.#useBigPreview) {
       element.dataset.previewUrl = element.link!;
       element.unbounded = true;
     } else {

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 a93e4a58fddde0c31dd96d4772f69bc074b87d2f..a66a36cb539147e73260de190a12fc2ca50558ae 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
@@ -16,13 +16,13 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
         #fieldId;
         #replaceElement = undefined;
         #fileInput;
-        #imageOnly;
+        #useBigPreview;
         #singleFileUpload;
         #extraButtons;
         #uploadResolve;
-        constructor(fieldId, singleFileUpload = false, imageOnly = false, extraButtons = []) {
+        constructor(fieldId, singleFileUpload = false, useBigPreview = false, extraButtons = []) {
             this.#fieldId = fieldId;
-            this.#imageOnly = imageOnly;
+            this.#useBigPreview = useBigPreview;
             this.#singleFileUpload = singleFileUpload;
             this.#extraButtons = extraButtons;
             this.#container = document.getElementById(fieldId + "Container");
@@ -43,10 +43,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             fileProcessors.set(fieldId, this);
         }
         get classPrefix() {
-            return this.showBigPreview ? "fileUpload__preview__" : "fileList__";
-        }
-        get showBigPreview() {
-            return this.#singleFileUpload && this.#imageOnly;
+            return this.#useBigPreview ? "fileUpload__preview__" : "fileList__";
         }
         addButtons(container, element) {
             const buttons = document.createElement("ul");
@@ -140,7 +137,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             return replaceButton;
         }
         #unregisterFile(element) {
-            if (this.showBigPreview) {
+            if (this.#useBigPreview) {
                 element.parentElement.innerHTML = "";
             }
             else {
@@ -149,7 +146,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
         }
         #registerFile(element, container = null) {
             if (container === null) {
-                if (this.showBigPreview) {
+                if (this.#useBigPreview) {
                     container = this.#container.querySelector(".fileUpload__preview");
                     if (container === null) {
                         container = document.createElement("div");
@@ -164,7 +161,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                     this.#container.querySelector(".fileList").append(container);
                 }
             }
-            if (!this.showBigPreview) {
+            if (!this.#useBigPreview) {
                 (0, Helper_1.insertFileInformation)(container, element);
             }
             (0, Helper_1.trackUploadProgress)(container, element);
@@ -180,7 +177,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
                 if (this.#replaceElement !== undefined) {
                     this.#registerFile(this.#replaceElement);
                     this.#replaceElement = undefined;
-                    if (this.showBigPreview) {
+                    if (this.#useBigPreview) {
                         // `this.#replaceElement` need a new container, otherwise the element will be marked as erroneous, too.
                         const tmpContainer = document.createElement("div");
                         tmpContainer.append(element);
@@ -195,7 +192,7 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Language", "WoltLabSui
             });
         }
         #fileInitializationCompleted(element, container) {
-            if (this.showBigPreview) {
+            if (this.#useBigPreview) {
                 element.dataset.previewUrl = element.link;
                 element.unbounded = true;
             }

diff --git a/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php b/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
index 4da671a60e90af786062939450e8adbe1978ab12..a41b418e812b8cff954b0614a3fb41472809b093 100644 (file)
--- a/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
+++ b/wcfsetup/install/files/lib/system/form/builder/field/FileProcessorFormField.class.php
@@ -41,6 +41,7 @@ final class FileProcessorFormField extends AbstractFormField
      */
     private array $files = [];
     private bool $singleFileUpload = false;
+    private bool $bigPreview = false;
     private array $actionButtons = [];
 
     #[\Override]
@@ -74,10 +75,6 @@ final class FileProcessorFormField extends AbstractFormField
                 $this->context
             ),
             'maxUploads' => $this->getFileProcessor()->getMaximumCount($this->context),
-            'imageOnly' => \array_diff(
-                $this->getFileProcessor()->getAllowedFileExtensions($this->context),
-                ImageUtil::IMAGE_EXTENSIONS
-            ) === [],
             'actionButtons' => $this->actionButtons,
         ];
     }
@@ -217,4 +214,33 @@ final class FileProcessorFormField extends AbstractFormField
 
         return $this;
     }
+
+    /**
+     * Returns whether the big preview is shown for images.
+     */
+    public function isBigPreview(): bool
+    {
+        return $this->bigPreview;
+    }
+
+    /**
+     * Sets whether the big preview is shown for images.
+     */
+    public function bigPreview(bool $bigPreview = true): self
+    {
+        if (
+            $this->bigPreview
+            && \array_diff(
+                $this->getFileProcessor()->getAllowedFileExtensions($this->context),
+                ImageUtil::IMAGE_EXTENSIONS
+            ) !== []
+        ) {
+            throw new \InvalidArgumentException(
+                "The big preview is only supported for images for the field '{$this->getId()}'."
+            );
+        }
+        $this->bigPreview = $bigPreview;
+
+        return $this;
+    }
 }