Validate the file size before querying the server

ts/WoltLabSuite/Core/Component/File/Upload.ts

@@ -195,7 +195,37 @@ function validateFileLimit(element: WoltlabCoreFileUploadElement): boolean {
   return false;
 }
 
-function validateFile(element: WoltlabCoreFileUploadElement, file: File): boolean {
+function validateFileSize(element: WoltlabCoreFileUploadElement, file: File): boolean {
+  let isImage = false;
+  switch (file.type) {
+    case "image/gif":
+    case "image/jpeg":
+    case "image/png":
+    case "image/webp":
+      isImage = true;
+      break;
+  }
+
+  // Skip the file size validation for images, they can potentially be resized.
+  if (isImage) {
+    return true;
+  }
+
+  const maximumSize = element.maximumSize;
+  if (maximumSize === -1) {
+    return true;
+  }
+
+  if (file.size <= maximumSize) {
+    return true;
+  }
+
+  innerError(element, getPhrase("wcf.upload.error.fileSizeTooLarge", { filename: file.name }));
+
+  return false;
+}
+
+function validateFileExtension(element: WoltlabCoreFileUploadElement, file: File): boolean {
   const fileExtensions = (element.dataset.fileExtensions || "*").split(",");
   for (const fileExtension of fileExtensions) {
     if (fileExtension === "*") {
@@ -219,7 +249,9 @@ export function setup(): void {
 
       if (!validateFileLimit(element)) {
         return;
-      } else if (!validateFile(element, file)) {
+      } else if (!validateFileExtension(element, file)) {
+        return;
+      } else if (!validateFileSize(element, file)) {
         return;
       }
 
@@ -240,7 +272,7 @@ export function setup(): void {
 
       clearPreviousErrors(element);
 
-      if (!validateFile(element, file)) {
+      if (!validateFileExtension(element, file)) {
         promiseReject!();
 
         return;

ts/WoltLabSuite/WebComponent/woltlab-core-file-upload.ts

@@ -68,6 +68,10 @@
       return parseInt(this.dataset.maximumCount || "1");
     }
 
+    get maximumSize(): number {
+      return parseInt(this.dataset.maximumSize || "-1");
+    }
+
     get disabled(): boolean {
       return this.#element.disabled;
     }

ts/global.d.ts

@@ -96,6 +96,7 @@ declare global {
     get disabled(): boolean;
     set disabled(disabled: boolean);
     get maximumCount(): number;
+    get maximumSize(): number;
   }
 
   interface WoltlabCoreLoadingIndicatorElement extends HTMLElement {

wcfsetup/install/files/lib/system/file/processor/AbstractFileProcessor.class.php

@@ -51,6 +51,13 @@ public function getMaximumCount(array $context): ?int
         return 1;
     }
 
+    #[\Override]
+    public function getMaximumSize(array $context): ?int
+    {
+        // Do not limit the maximum size of an uploaded file.
+        return null;
+    }
+
     #[\Override]
     public function getResizeConfiguration(): ResizeConfiguration
     {

wcfsetup/install/files/lib/system/file/processor/AttachmentFileProcessor.class.php

@@ -248,6 +248,13 @@ public function countExistingFiles(array $context): ?int
         return $attachmentHandler?->count();
     }
 
+    #[\Override]
+    public function getMaximumSize(array $context): ?int
+    {
+        $attachmentHandler = $this->getAttachmentHandlerFromContext($context);
+        return $attachmentHandler?->getMaxSize();
+    }
+
     private function getAttachmentHandlerFromContext(array $context): ?AttachmentHandler
     {
         try {

wcfsetup/install/files/lib/system/file/processor/FileProcessor.class.php

@@ -81,6 +81,11 @@ public function getHtmlElement(IFileProcessor $fileProcessor, array $context): s
             $maximumCount = -1;
         }
 
+        $maximumSize = $fileProcessor->getMaximumSize($context);
+        if ($maximumSize === null) {
+            $maximumSize = -1;
+        }
+
         return \sprintf(
             <<<'HTML'
                 <woltlab-core-file-upload
@@ -89,13 +94,15 @@ public function getHtmlElement(IFileProcessor $fileProcessor, array $context): s
                     data-file-extensions="%s"
                     data-resize-configuration="%s"
                     data-maximum-count="%d"
+                    data-maximum-size="%d"
                 ></woltlab-core-file-upload>
                 HTML,
             StringUtil::encodeHTML($fileProcessor->getObjectTypeName()),
             StringUtil::encodeHTML(JSON::encode($context)),
             StringUtil::encodeHTML($allowedFileExtensions),
             StringUtil::encodeHTML(JSON::encode($fileProcessor->getResizeConfiguration())),
             $maximumCount,
+            $maximumSize,
         );
     }
 

wcfsetup/install/files/lib/system/file/processor/IFileProcessor.class.php

@@ -65,7 +65,7 @@ public function canDownload(File $file): bool;
      * it does not track this for whatever reason.
      *
      * @param array<string,string> $context
-     * @return null|int number of existing files or `null` if this should not be enforced
+     * @return null|int Number of existing files or `null` if this should not be enforced
      */
     public function countExistingFiles(array $context): ?int;
 
@@ -101,6 +101,14 @@ public function getFileCacheDuration(File $file): FileCacheDuration;
      */
     public function getMaximumCount(array $context): ?int;
 
+    /**
+     * Limits the maximum size of an uploade file.
+     *
+     * @param array<string,string> $context
+     * @return null|int Maximum size in bytes or null to disable the limit.
+     */
+    public function getMaximumSize(array $context): ?int;
+
     /**
      * Controls the client-side resizing of some types of images before they are
      * being uploaded to the server.