[WC-3051]: Improve file extension validation in file uploader web widget (#1802)

Author: r0b1n

package.json

@@ -67,7 +67,8 @@
             "mobx@6.12.3": "patches/mobx@6.12.3.patch",
             "mobx-react-lite@4.0.7": "patches/mobx-react-lite@4.0.7.patch",
             "mime-types": "patches/mime-types.patch",
-            "rc-trigger": "patches/rc-trigger.patch"
+            "rc-trigger": "patches/rc-trigger.patch",
+            "react-dropzone": "patches/react-dropzone.patch"
         },
         "onlyBuiltDependencies": [
             "@swc/core",

packages/modules/file-uploader/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/file-uploader",
     "moduleName": "File Uploader module",
-    "version": "2.2.2",
+    "version": "2.3.0",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
     "private": true,

packages/pluggableWidgets/file-uploader-web/CHANGELOG.md

@@ -8,6 +8,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- We improved the file extension validation to allow special characters like dashes and plus signs (e.g., '.tar-gz', '.c++').
+
+- We clarified error messages for invalid file extensions to better explain the expected format.
+
 - We fixed an issue where file uploader can still add more files when refreshed eventhough the number of maximum uploaded files has been reached.
 
 ### Changed

packages/pluggableWidgets/file-uploader-web/src/utils/__tests__/parseAllowedFormats.spec.ts

@@ -95,6 +95,40 @@ describe("parseAllowedFormats", () => {
             "Value 'application-pdf' is not recognized. Accepted format: 'image/jpeg'"
         );
     });
+    test("handles extensions with special characters like dashes and plus signs", () => {
+        const input: AllowedFileFormatsType[] = [
+            {
+                configMode: "advanced",
+                typeFormatDescription: dynamicValue("special-extensions"),
+                predefinedType: "pdfFile",
+                mimeType: "application/x-custom",
+                extensions: ".tar-gz,.js-map,.c++"
+            }
+        ];
+
+        expect(parseAllowedFormats(input)).toEqual([
+            {
+                description: "special-extensions",
+                entries: [["application/x-custom", [".tar-gz", ".js-map", ".c++"]]]
+            }
+        ]);
+    });
+    test("throws on extension without leading dot", () => {
+        const input: AllowedFileFormatsType[] = [
+            {
+                configMode: "advanced",
+                typeFormatDescription: dynamicValue("test"),
+                predefinedType: "pdfFile",
+                mimeType: "text/*",
+                extensions: ".txt,pdf"
+            }
+        ];
+
+        expect(() => parseAllowedFormats(input)).toThrow(
+            "Value 'pdf' is not recognized. Extension must start with a dot and contain only valid filename characters"
+        );
+    });
+
     test("throws on incorrect extension format", () => {
         const input: AllowedFileFormatsType[] = [
             {
@@ -106,6 +140,24 @@ describe("parseAllowedFormats", () => {
             }
         ];
 
-        expect(() => parseAllowedFormats(input)).toThrow("Value 'abc' is not recognized. Accepted format: '.pdf'");
+        expect(() => parseAllowedFormats(input)).toThrow(
+            "Value 'abc' is not recognized. Extension must start with a dot and contain only valid filename characters"
+        );
+    });
+
+    test("throws on extension with dot in the middle", () => {
+        const input: AllowedFileFormatsType[] = [
+            {
+                configMode: "advanced",
+                typeFormatDescription: dynamicValue("test"),
+                predefinedType: "pdfFile",
+                mimeType: "text/*",
+                extensions: ".txt,.config.json"
+            }
+        ];
+
+        expect(() => parseAllowedFormats(input)).toThrow(
+            "Value '.config.json' is not recognized. Extension must start with a dot and contain only valid filename characters"
+        );
     });
 });

packages/pluggableWidgets/file-uploader-web/src/utils/parseAllowedFormats.ts

@@ -59,11 +59,13 @@ function parseExtensionsList(config: string): string[] {
         .map(c => c.trim())
         .filter(c => c)
         .map(c => {
-            if (/^\.\w+$/.test(c)) {
-                // ".ext" string
+            if (/^\.[^/\\?*<>|:".]+$/.test(c)) {
+                // ".ext" string - allowing most characters except those invalid in filenames
                 return c;
             }
 
-            throw new Error(`Value '${c}' is not recognized. Accepted format: '.pdf'`);
+            throw new Error(
+                `Value '${c}' is not recognized. Extension must start with a dot and contain only valid filename characters (e.g. '.pdf', '.doc', '.tar-gz')`
+            );
         });
 }