feat(file-upload): improve max file upload

Author: gjulivan

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

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where file uploader can still add more files when refreshed eventhough the number of maximum uploaded files has been reached.
+
+### Added
+
+- We added a configuration to set maximum number of uploaded files through expression.
+
 ## [2.2.2] - 2025-07-01
 
 ### Fixed

packages/pluggableWidgets/file-uploader-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/file-uploader-web",
     "widgetName": "FileUploader",
-    "version": "2.2.2",
+    "version": "2.3.0",
     "description": "",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/file-uploader-web/src/FileUploader.editorConfig.ts

@@ -40,6 +40,12 @@ export function getProperties(
         hidePropertiesIn(properties, values, ["customButtons"]);
     }
 
+    if (values.maxFilePerUploadType === "expression") {
+        hidePropertiesIn(properties, values, ["maxFilesPerUpload"]);
+    } else {
+        hidePropertiesIn(properties, values, ["maxFilesPerUploadExpression"]);
+    }
+
     return properties;
 }
 

packages/pluggableWidgets/file-uploader-web/src/FileUploader.xml

@@ -80,9 +80,22 @@
                     </propertyGroup>
                 </properties>
             </property>
+            <property key="maxFilePerUploadType" type="enumeration" defaultValue="number">
+                <caption>Maximum number of files per upload type</caption>
+                <description />
+                <enumerationValues>
+                    <enumerationValue key="number">Number</enumerationValue>
+                    <enumerationValue key="expression">Expression</enumerationValue>
+                </enumerationValues>
+            </property>
+            <property key="maxFilesPerUploadExpression" type="expression" defaultValue="10">
+                <caption>Maximum number of files</caption>
+                <description>Limit the number of files per upload.</description>
+                <returnType type="Integer" />
+            </property>
             <property key="maxFilesPerUpload" type="integer" defaultValue="10">
                 <caption>Maximum number of files</caption>
-                <description>Limit the number of files per one upload.</description>
+                <description>Limit the number of files per upload.</description>
             </property>
             <property key="maxFileSize" type="integer" defaultValue="25">
                 <caption>Maximum file size (MB)</caption>

packages/pluggableWidgets/file-uploader-web/src/components/Dropzone.tsx

@@ -12,15 +12,24 @@ interface DropzoneProps {
     maxSize: number;
     maxFilesPerUpload: number;
     acceptFileTypes: MimeCheckFormat;
+    disabled: boolean;
 }
 
 export const Dropzone = observer(
-    ({ warningMessage, onDrop, maxSize, maxFilesPerUpload, acceptFileTypes }: DropzoneProps): ReactElement => {
+    ({
+        warningMessage,
+        onDrop,
+        maxSize,
+        maxFilesPerUpload,
+        acceptFileTypes,
+        disabled
+    }: DropzoneProps): ReactElement => {
         const { getRootProps, getInputProps, isDragAccept, isDragReject } = useDropzone({
             onDrop,
             maxSize: maxSize || undefined,
             maxFiles: maxFilesPerUpload,
-            accept: acceptFileTypes
+            accept: acceptFileTypes,
+            disabled
         });
 
         const translations = useTranslationsStore();
@@ -31,14 +40,15 @@ export const Dropzone = observer(
                 <div
                     className={classNames("dropzone", {
                         active: type === "active",
+                        disabled,
                         warning: !!warningMessage || type === "warning"
                     })}
                     {...getRootProps()}
                 >
                     <div className={"file-icon"} />
-                    <p className={"upload-text"}>{msg}</p>
+                    {!disabled && <p className={"upload-text"}>{msg}</p>}
 
-                    <input {...getInputProps()} />
+                    {!disabled && <input {...getInputProps()} />}
                 </div>
                 {warningMessage && <div className={classNames("dropzone-message")}>{warningMessage}</div>}
             </Fragment>

packages/pluggableWidgets/file-uploader-web/src/components/FileUploaderRoot.tsx

@@ -29,7 +29,8 @@ export const FileUploaderRoot = observer((props: FileUploaderContainerProps): Re
                     warningMessage={rootStore.errorMessage}
                     maxSize={rootStore._maxFileSize}
                     acceptFileTypes={prepareAcceptForDropzone(rootStore.acceptedFileTypes)}
-                    maxFilesPerUpload={rootStore._maxFilesPerUpload}
+                    maxFilesPerUpload={rootStore.maxFilesPerUpload ?? 0}
+                    disabled={rootStore.isFileUploadLimitReached}
                 />
             )}
 

packages/pluggableWidgets/file-uploader-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="FileUploader" version="2.2.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="FileUploader" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="FileUploader.xml" />
         </widgetFiles>

packages/pluggableWidgets/file-uploader-web/src/stores/FileUploaderStore.ts

@@ -1,6 +1,7 @@
-import { ListValue, ObjectItem } from "mendix";
-import { FileUploaderContainerProps, UploadModeEnum } from "../../typings/FileUploaderProps";
+import { DynamicValue, ListValue, ObjectItem } from "mendix";
+import { FileUploaderContainerProps, MaxFilePerUploadTypeEnum, UploadModeEnum } from "../../typings/FileUploaderProps";
 import { action, computed, makeObservable, observable } from "mobx";
+import { Big } from "big.js";
 import { getImageUploaderFormats, parseAllowedFormats } from "../utils/parseAllowedFormats";
 import { FileStore } from "./FileStore";
 import { FileRejection } from "react-dropzone";
@@ -27,6 +28,8 @@ export class FileUploaderStore {
     _maxFileSize = 0;
     _ds?: ListValue;
     _maxFilesPerUpload: number;
+    _maxFilePerUploadType: MaxFilePerUploadTypeEnum;
+    _maxFilesPerUploadExpression: DynamicValue<Big>;
 
     errorMessage?: string = undefined;
 
@@ -37,6 +40,8 @@ export class FileUploaderStore {
         this._maxFileSizeMiB = props.maxFileSize;
         this._maxFileSize = this._maxFileSizeMiB * 1024 * 1024;
         this._maxFilesPerUpload = props.maxFilesPerUpload;
+        this._maxFilePerUploadType = props.maxFilePerUploadType;
+        this._maxFilesPerUploadExpression = props.maxFilesPerUploadExpression;
         this._uploadMode = props.uploadMode;
 
         this.objectCreationHelper = new ObjectCreationHelper(this._widgetName, props.objectCreationTimeout);
@@ -79,7 +84,9 @@ export class FileUploaderStore {
             files: observable,
             existingItemsLoaded: observable,
             errorMessage: observable,
-            allowedFormatsDescription: computed
+            allowedFormatsDescription: computed,
+            maxFilesPerUpload: computed,
+            isFileUploadLimitReached: computed
         });
 
         this.updateProps(props);
@@ -94,6 +101,11 @@ export class FileUploaderStore {
             this._ds = props.associatedImages;
         }
 
+        // Update max files properties
+        this._maxFilesPerUpload = props.maxFilesPerUpload;
+        this._maxFilePerUploadType = props.maxFilePerUploadType;
+        this._maxFilesPerUploadExpression = props.maxFilesPerUploadExpression;
+
         this.translations.updateProps(props);
         this.updateProcessor.processUpdate(this._ds);
     }
@@ -113,6 +125,28 @@ export class FileUploaderStore {
             .join(", ");
     }
 
+    get maxFilesPerUpload(): number | undefined {
+        if (this._maxFilePerUploadType === "expression") {
+            const expressionValue = this._maxFilesPerUploadExpression.value;
+            if (expressionValue && !isNaN(Number(expressionValue))) {
+                return Number(expressionValue);
+            }
+            // Fallback to default if expression is invalid
+            return undefined;
+        }
+        return this._maxFilesPerUpload;
+    }
+
+    get isFileUploadLimitReached(): boolean {
+        const activeFiles = this.files.filter(
+            file => file.fileStatus !== "missing" && file.fileStatus !== "removedFile"
+        );
+        if (!this.maxFilesPerUpload || this.maxFilesPerUpload === 0) {
+            return false;
+        }
+        return activeFiles.length >= this.maxFilesPerUpload;
+    }
+
     setMessage(msg?: string): void {
         this.errorMessage = msg;
     }
@@ -128,7 +162,7 @@ export class FileUploaderStore {
 
         if (fileRejections.length && fileRejections[0].errors[0].code === "too-many-files") {
             this.setMessage(
-                this.translations.get("uploadFailureTooManyFilesMessage", this._maxFilesPerUpload.toString())
+                this.translations.get("uploadFailureTooManyFilesMessage", this.maxFilesPerUpload?.toString() ?? "")
             );
             return;
         }

packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss

@@ -74,6 +74,13 @@ Place your custom CSS here
             border: 1.5px solid var(--brand-primary, $file-brand-primary);
             background-color: var(--color-primary-lighter, $file-color-primary-lighter);
         }
+        &.disabled {
+            border: 1.5px dashed var(--border-color-default, $file-border-color-default);
+            background-color: var(--bg-color, $file-bg-color);
+            .file-icon {
+                opacity: 0.5;
+            }
+        }
 
         .file-icon {
             flex: 0 0 34px;

packages/pluggableWidgets/file-uploader-web/typings/FileUploaderProps.d.ts

@@ -5,6 +5,7 @@
  */
 import { CSSProperties } from "react";
 import { ActionValue, DynamicValue, ListValue, ListActionValue, WebIcon } from "mendix";
+import { Big } from "big.js";
 
 export type UploadModeEnum = "files" | "images";
 
@@ -20,6 +21,8 @@ export interface AllowedFileFormatsType {
     typeFormatDescription: DynamicValue<string>;
 }
 
+export type MaxFilePerUploadTypeEnum = "number" | "expression";
+
 export interface CustomButtonsType {
     buttonCaption: DynamicValue<string>;
     buttonIcon: DynamicValue<WebIcon>;
@@ -58,6 +61,8 @@ export interface FileUploaderContainerProps {
     createFileAction?: ActionValue;
     createImageAction?: ActionValue;
     allowedFileFormats: AllowedFileFormatsType[];
+    maxFilePerUploadType: MaxFilePerUploadTypeEnum;
+    maxFilesPerUploadExpression: DynamicValue<Big>;
     maxFilesPerUpload: number;
     maxFileSize: number;
     dropzoneIdleMessage: DynamicValue<string>;
@@ -97,6 +102,8 @@ export interface FileUploaderPreviewProps {
     createFileAction: {} | null;
     createImageAction: {} | null;
     allowedFileFormats: AllowedFileFormatsPreviewType[];
+    maxFilePerUploadType: MaxFilePerUploadTypeEnum;
+    maxFilesPerUploadExpression: string;
     maxFilesPerUpload: number | null;
     maxFileSize: number | null;
     dropzoneIdleMessage: string;