[Feat]: #2100 file validation add + refactor file upload

Author: iamfaran

client/packages/lowcoder/src/comps/comps/fileComp/draggerUpload.tsx

@@ -11,8 +11,7 @@ import {
   multiChangeAction,
 } from "lowcoder-core";
 import { hasIcon } from "comps/utils";
-import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
-import { resolveValue, resolveParsedValue, commonProps } from "./fileComp";
+import { resolveValue, resolveParsedValue, commonProps, validateFile } from "./fileComp";
 import { FileStyleType, AnimationStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { ImageCaptureModal } from "./ImageCaptureModal";
 import { v4 as uuidv4 } from "uuid";
@@ -152,6 +151,7 @@ interface DraggerUploadProps {
   minSize: number;
   maxSize: number;
   maxFiles: number;
+  fileNamePattern: string;
   uploadType: "single" | "multiple" | "directory";
   text: string;
   dragHintText?: string;
@@ -254,21 +254,11 @@ export const DraggerUpload = (props: DraggerUploadProps) => {
         $auto={autoHeight}
         capture={props.forceCapture}
         openFileDialogOnClick={!(props.forceCapture && !isMobile)}
-        beforeUpload={(file) => {
-          if (!file.size || file.size <= 0) {
-            messageInstance.error(`${file.name} ` + trans("file.fileEmptyErrorMsg"));
-            return AntdUpload.LIST_IGNORE;
-          }
-
-          if (
-            (!!props.minSize && file.size < props.minSize) ||
-            (!!props.maxSize && file.size > props.maxSize)
-          ) {
-            messageInstance.error(`${file.name} ` + trans("file.fileSizeExceedErrorMsg"));
-            return AntdUpload.LIST_IGNORE;
-          }
-          return true;
-        }}
+        beforeUpload={(file) => validateFile(file, {
+          minSize: props.minSize,
+          maxSize: props.maxSize,
+          fileNamePattern: props.fileNamePattern,
+        })}
         onChange={handleOnChange}
       >
           <p className="ant-upload-drag-icon">

client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx

@@ -97,6 +97,7 @@ const validationChildren = {
   minSize: FileSizeControl,
   maxSize: FileSizeControl,
   maxFiles: NumberControl,
+  fileNamePattern: StringControl,
 };
 
 const commonChildren = {
@@ -127,6 +128,11 @@ const commonValidationFields = (children: RecordConstructorToComp<typeof validat
     placeholder: "10kb",
     tooltip: trans("file.maxSizeTooltip"),
   }),
+  children.fileNamePattern.propertyView({
+    label: trans("file.fileNamePattern"),
+    placeholder: trans("file.fileNamePatternPlaceholder"),
+    tooltip: trans("file.fileNamePatternTooltip"),
+  }),
 ];
 
 export const commonProps = (
@@ -141,6 +147,49 @@ export const commonProps = (
   customRequest: (options: UploadRequestOption) => options.onSuccess && options.onSuccess({}), // Override the default upload logic and do not upload to the specified server
 });
 
+export interface FileValidationOptions {
+  minSize?: number;
+  maxSize?: number;
+  fileNamePattern?: string;
+}
+
+
+export const validateFile = (
+  file: { name: string; size?: number },
+  options: FileValidationOptions
+): boolean | typeof AntdUpload.LIST_IGNORE => {
+  // Empty file validation
+  if (!file.size || file.size <= 0) {
+    messageInstance.error(`${file.name} ` + trans("file.fileEmptyErrorMsg"));
+    return AntdUpload.LIST_IGNORE;
+  }
+
+  // File size validation
+  if (
+    (!!options.minSize && file.size < options.minSize) ||
+    (!!options.maxSize && file.size > options.maxSize)
+  ) {
+    messageInstance.error(`${file.name} ` + trans("file.fileSizeExceedErrorMsg"));
+    return AntdUpload.LIST_IGNORE;
+  }
+
+  // File name pattern validation
+  if (options.fileNamePattern) {
+    try {
+      const pattern = new RegExp(options.fileNamePattern);
+      if (!pattern.test(file.name)) {
+        messageInstance.error(`${file.name} ` + trans("file.fileNamePatternErrorMsg"));
+        return AntdUpload.LIST_IGNORE;
+      }
+    } catch (e) {
+      messageInstance.error(trans("file.invalidFileNamePatternMsg", { error: String(e) }));
+      return AntdUpload.LIST_IGNORE;
+    }
+  }
+
+  return true;
+};
+
 const getStyle = (style: FileStyleType) => {
   return css`
     .ant-btn {
@@ -361,21 +410,11 @@ const Upload = (
         {...commonProps(props)}
         $style={style}
         fileList={fileList}
-        beforeUpload={(file) => {
-          if (!file.size || file.size <= 0) {
-            messageInstance.error(`${file.name} ` + trans("file.fileEmptyErrorMsg"));
-            return AntdUpload.LIST_IGNORE;
-          }
-
-          if (
-            (!!props.minSize && file.size < props.minSize) ||
-            (!!props.maxSize && file.size > props.maxSize)
-          ) {
-            messageInstance.error(`${file.name} ` + trans("file.fileSizeExceedErrorMsg"));
-            return AntdUpload.LIST_IGNORE;
-          }
-          return true;
-        }}
+        beforeUpload={(file) => validateFile(file, {
+          minSize: props.minSize,
+          maxSize: props.maxSize,
+          fileNamePattern: props.fileNamePattern,
+        })}
         onChange={handleOnChange}
 
       >

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1949,6 +1949,11 @@ export const en = {
     "dragAreaText": "Click or drag file to this area to upload",
     "dragAreaHint": "Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.",
     "dragHintText": "Hint Text",
+    "fileNamePattern": "File Name Pattern",
+    "fileNamePatternTooltip": "A regular expression pattern to validate file names (e.g., '^[a-zA-Z0-9_-]+\\.[a-z]+$' for alphanumeric names). Leave empty to allow all file names.",
+    "fileNamePatternPlaceholder": "^[a-zA-Z0-9_-]+\\.[a-z]+$",
+    "fileNamePatternErrorMsg": "Upload Failed. The File Name Does Not Match the Required Pattern.",
+    "invalidFileNamePatternMsg": "Invalid File Name Pattern: {error}",
   },
   "date": {
     "format": "Format",