Block drag & drop for illegal file extensions

diff --git a/ts/WoltLabSuite/Core/Component/Attachment/List.ts b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
index acd7101dbf79517e61d574916115d82f34cc25af..3920343d9dec1d6e8b65e19d9c01195058a52c01 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Attachment/List.ts
+++ b/ts/WoltLabSuite/Core/Component/Attachment/List.ts
@@ -156,7 +156,7 @@ export function setup(editorId: string): void {
   const existingFiles = container.querySelector<HTMLElement>(".attachment__list__existingFiles");
   if (existingFiles !== null) {
     existingFiles.querySelectorAll("woltlab-core-file").forEach((file) => {
-      upload(fileList, file, editorId);
+      upload(fileList!, file, editorId);
     });
 
     existingFiles.remove();

diff --git a/ts/WoltLabSuite/Core/Component/File/Upload.ts b/ts/WoltLabSuite/Core/Component/File/Upload.ts
index 2e149ca9319e439628baba3ff3dd0587e99e238c..6d0eaad2e71ba448bd223c78ee1b5816d37197ee 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/File/Upload.ts
+++ b/ts/WoltLabSuite/Core/Component/File/Upload.ts
@@ -159,6 +159,21 @@ async function resizeImage(element: WoltlabCoreFileUploadElement, file: File): P
   return resizedFile;
 }
 
+function validateFile(element: WoltlabCoreFileUploadElement, file: File): boolean {
+  const fileExtensions = (element.dataset.fileExtensions || "*").split(",");
+  for (const fileExtension of fileExtensions) {
+    if (fileExtension === "*") {
+      return true;
+    } else if (file.name.endsWith(fileExtension)) {
+      return true;
+    }
+  }
+
+  // TODO: show an error message
+
+  return false;
+}
+
 export function setup(): void {
   wheneverFirstSeen("woltlab-core-file-upload", (element: WoltlabCoreFileUploadElement) => {
     element.addEventListener("upload", (event: CustomEvent<File>) => {
@@ -166,6 +181,10 @@ export function setup(): void {
 
       clearPreviousErrors(element);
 
+      if (!validateFile(element, file)) {
+        return;
+      }
+
       void resizeImage(element, file).then((resizedFile) => {
         void upload(element, resizedFile);
       });

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/Upload.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/Upload.js
index a822e10cc8225755e89ce6563c0a2e68742e84ad..acd60e9ca4e65c73244e473eb7b88c677daf5fae 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/Upload.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/File/Upload.js
@@ -102,11 +102,27 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Helper/Selector", "Wol
         }, file.name, fileType, resizeConfiguration.quality);
         return resizedFile;
     }
+    function validateFile(element, file) {
+        const fileExtensions = (element.dataset.fileExtensions || "*").split(",");
+        for (const fileExtension of fileExtensions) {
+            if (fileExtension === "*") {
+                return true;
+            }
+            else if (file.name.endsWith(fileExtension)) {
+                return true;
+            }
+        }
+        // TODO: show an error message
+        return false;
+    }
     function setup() {
         (0, Selector_1.wheneverFirstSeen)("woltlab-core-file-upload", (element) => {
             element.addEventListener("upload", (event) => {
                 const file = event.detail;
                 clearPreviousErrors(element);
+                if (!validateFile(element, file)) {
+                    return;
+                }
                 void resizeImage(element, file).then((resizedFile) => {
                     void upload(element, resizedFile);
                 });