feat(file-uploader): limit total number of files and make it dynamic

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.
+
+### Changed
+
+- We change the max file 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

@@ -89,13 +89,6 @@ export function check(values: FileUploaderPreviewProps): Problem[] {
             }
         }
 
-        if (!values.maxFilesPerUpload || values.maxFilesPerUpload < 1) {
-            errors.push({
-                property: "maxFilesPerUpload",
-                message: "There must be at least one file per upload allowed."
-            });
-        }
-
         if (values.enableCustomButtons) {
             // check that at max one actions is default
             const defaultIdx = new Set<number>();

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

@@ -80,9 +80,10 @@
                     </propertyGroup>
                 </properties>
             </property>
-            <property key="maxFilesPerUpload" type="integer" defaultValue="10">
+            <property key="maxFilesPerUpload" type="expression" 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>
+                <returnType type="Integer" />
             </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/FileStore.ts

@@ -69,6 +69,11 @@ export class FileStore {
         this._objectItem = undefined;
     }
 
+    markError(errorMessage: string): void {
+        this.fileStatus = "validationError";
+        this.errorDescription = errorMessage;
+    }
+
     canExecute(listAction: ListActionValue): boolean {
         if (!this._objectItem) {
             return false;

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

@@ -1,6 +1,7 @@
-import { ListValue, ObjectItem } from "mendix";
+import { DynamicValue, ListValue, ObjectItem } from "mendix";
 import { FileUploaderContainerProps, 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";
@@ -26,7 +27,7 @@ export class FileUploaderStore {
     _maxFileSizeMiB = 0;
     _maxFileSize = 0;
     _ds?: ListValue;
-    _maxFilesPerUpload: number;
+    _maxFilesPerUpload: DynamicValue<Big>;
 
     errorMessage?: string = undefined;
 
@@ -79,7 +80,10 @@ export class FileUploaderStore {
             files: observable,
             existingItemsLoaded: observable,
             errorMessage: observable,
-            allowedFormatsDescription: computed
+            allowedFormatsDescription: computed,
+            maxFilesPerUpload: computed,
+            _maxFilesPerUpload: observable,
+            isFileUploadLimitReached: computed
         });
 
         this.updateProps(props);
@@ -94,6 +98,9 @@ export class FileUploaderStore {
             this._ds = props.associatedImages;
         }
 
+        // Update max files properties
+        this._maxFilesPerUpload = props.maxFilesPerUpload;
+
         this.translations.updateProps(props);
         this.updateProcessor.processUpdate(this._ds);
     }
@@ -113,6 +120,29 @@ export class FileUploaderStore {
             .join(", ");
     }
 
+    get maxFilesPerUpload(): number {
+        const expressionValue = this._maxFilesPerUpload.value;
+        if (expressionValue) {
+            return expressionValue.toNumber();
+        }
+        // Fallback to unlimited
+        return 0;
+    }
+
+    get isFileUploadLimitReached(): boolean {
+        const activeFiles = this.files.filter(
+            file =>
+                file.fileStatus !== "missing" &&
+                file.fileStatus !== "removedFile" &&
+                file.fileStatus !== "validationError"
+        );
+        if (this.maxFilesPerUpload === 0) {
+            return false;
+        }
+
+        return activeFiles.length >= this.maxFilesPerUpload;
+    }
+
     setMessage(msg?: string): void {
         this.errorMessage = msg;
     }
@@ -128,7 +158,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;
         }
@@ -164,6 +194,12 @@ export class FileUploaderStore {
         for (const file of acceptedFiles) {
             const newFileStore = FileStore.newFile(file, this);
 
+            if (this.isFileUploadLimitReached) {
+                newFileStore.markError(
+                    this.translations.get("uploadFailureTooManyFilesMessage", this.maxFilesPerUpload.toString())
+                );
+            }
+
             this.files.unshift(newFileStore);
 
             if (newFileStore.validate()) {

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;