[WC-3361] FileUploader: enhance limits and feedback

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

@@ -6,6 +6,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where the dropzone turned grey without explanation when the file limit was reached. A message now appears below the dropzone stating "Maximum file count of X reached."
+- We fixed an issue where dropping more files than allowed rejected the entire batch. Only the excess files are now rejected; the rest upload normally.
+- We fixed an issue where files rejected due to the total file limit had no way to recover. They now show a retry button that becomes enabled when capacity is available.
+
+### Added
+
+- We added a new "Maximum concurrent uploads" property to control how many files upload simultaneously. Files beyond this limit wait in a queue and upload automatically as slots free up.
+- We added a new "File limit reached" text property to customize the message shown when the upload limit is reached.
+- We added a new "Upload queued" text property to customize the message shown on files that are waiting to upload.
+- We added a new "Retry button" text property to customize the tooltip on the retry button shown on rejected files.
+
+### Changed
+
+- The "Maximum number of files" property is now optional. Leaving it empty or setting it to 0 means unlimited files are allowed. The default behavior is now unlimited (no cap).
+- Files now upload in a queue rather than being marked as errors when too many are dropped at once. Queued files show a "Waiting..." state while they wait for a concurrent slot.
+- Files in the list are now ordered with successful uploads above rejected files.
+
 ## [2.4.2] - 2026-04-23
 
 ### Fixed

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

@@ -1,6 +1,6 @@
+import { hideNestedPropertiesIn, hidePropertiesIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
 import { FileUploaderPreviewProps } from "../typings/FileUploaderProps";
 import { parseAllowedFormats } from "./utils/parseAllowedFormats";
-import { hideNestedPropertiesIn, hidePropertiesIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
 import { predefinedFormats } from "./utils/predefinedFormats";
 
 export function getProperties(
@@ -21,6 +21,7 @@ export function getProperties(
             "createFileAction",
             "allowedFileFormats",
             "maxFilesPerUpload",
+            "maxFilesPerBatch",
             "maxFileSize",
             "objectCreationTimeout"
         ]);

packages/pluggableWidgets/file-uploader-web/src/FileUploader.editorPreview.tsx

@@ -1,6 +1,6 @@
+import classNames from "classnames";
 import { ReactElement } from "react";
 import { FileUploaderPreviewProps } from "../typings/FileUploaderProps";
-import classNames from "classnames";
 
 export function preview(props: FileUploaderPreviewProps): ReactElement {
     return (

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

@@ -80,9 +80,14 @@
                     </propertyGroup>
                 </properties>
             </property>
-            <property key="maxFilesPerUpload" type="expression" defaultValue="10">
+            <property key="maxFilesPerUpload" type="expression" defaultValue="10" required="false">
                 <caption>Maximum number of files</caption>
-                <description>Limit the number of files per upload.</description>
+                <description>Maximum total number of files that can be associated at once. Leave empty or set to 0 for unlimited. Use this to cap the total number of attachments.</description>
+                <returnType type="Integer" />
+            </property>
+            <property key="maxFilesPerBatch" type="expression" required="false">
+                <caption>Maximum concurrent uploads</caption>
+                <description>Maximum number of files uploading simultaneously. Remaining files wait in a queue and upload automatically as slots free up. Leave empty or set to 0 for unlimited.</description>
                 <returnType type="Integer" />
             </property>
             <property key="maxFileSize" type="integer" defaultValue="25">
@@ -123,6 +128,14 @@
                     <translation lang="nl_NL">Uploaden...</translation>
                 </translations>
             </property>
+            <property key="uploadQueuedMessage" type="textTemplate">
+                <caption>Upload queued</caption>
+                <description />
+                <translations>
+                    <translation lang="en_US">Waiting...</translation>
+                    <translation lang="nl_NL">Wachten...</translation>
+                </translations>
+            </property>
             <property key="uploadSuccessMessage" type="textTemplate">
                 <caption>Uploading success</caption>
                 <description />
@@ -163,6 +176,15 @@
                     <translation lang="nl_NL">Te veel bestanden toegevoegd. Slechts ### bestanden per upload zijn toegestaan.</translation>
                 </translations>
             </property>
+            <property key="uploadLimitReachedMessage" type="textTemplate">
+                <caption>File limit reached</caption>
+                <description>Shown below the dropzone when the maximum number of files is already reached.</description>
+                <translations>
+                    <translation lang="en_US">Maximum file count of ### reached.</translation>
+                    <translation lang="nl_NL">Maximum aantal bestanden van ### bereikt.</translation>
+                </translations>
+            </property>
+
             <property key="unavailableCreateActionMessage" type="textTemplate">
                 <caption>Action to create new files is not available or failed</caption>
                 <description />
@@ -187,6 +209,14 @@
                     <translation lang="nl_NL">Verwijder dit bestand</translation>
                 </translations>
             </property>
+            <property key="retryButtonTextMessage" type="textTemplate">
+                <caption>Retry button</caption>
+                <description />
+                <translations>
+                    <translation lang="en_US">Retry upload</translation>
+                    <translation lang="nl_NL">Opnieuw proberen</translation>
+                </translations>
+            </property>
             <property key="removeSuccessMessage" type="textTemplate">
                 <caption>File removal success</caption>
                 <description />

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

@@ -1,6 +1,6 @@
-import { MouseEvent, ReactElement, useCallback } from "react";
 import classNames from "classnames";
 import { ListActionValue } from "mendix";
+import { MouseEvent, ReactElement, useCallback } from "react";
 import { FileStore } from "../stores/FileStore";
 
 interface ActionButtonProps {

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

@@ -1,7 +1,9 @@
+import { observer } from "mobx-react-lite";
 import { ReactElement, useCallback } from "react";
-import { FileUploaderContainerProps } from "../../typings/FileUploaderProps";
-import { ActionButton, FileActionButton } from "./ActionButton";
 import { IconInternal } from "@mendix/widget-plugin-component-kit/IconInternal";
+import { ActionButton, FileActionButton } from "./ActionButton";
+import { RetryButton } from "./RetryButton";
+import { FileUploaderContainerProps } from "../../typings/FileUploaderProps";
 import { FileStore } from "../stores/FileStore";
 import { useTranslationsStore } from "../utils/useTranslationsStore";
 
@@ -10,12 +12,12 @@ interface ButtonsBarProps {
     store: FileStore;
 }
 
-export const ActionsBar = ({ actions, store }: ButtonsBarProps): ReactElement | null => {
-    if (!actions) {
+export const ActionsBar = observer(function ActionsBar({ actions, store }: ButtonsBarProps): ReactElement | null {
+    if (!actions || store.fileStatus === "rejected") {
         return <DefaultActionsBar store={store} />;
     }
 
-    if (actions && store.canExecuteActions) {
+    if (store.canExecuteActions) {
         return (
             <div className={"entry-details-actions"}>
                 {actions.map((a, i) => {
@@ -39,9 +41,9 @@ export const ActionsBar = ({ actions, store }: ButtonsBarProps): ReactElement |
     }
 
     return null;
-};
+});
 
-function DefaultActionsBar(props: ButtonsBarProps): ReactElement {
+const DefaultActionsBar = observer(function DefaultActionsBar(props: ButtonsBarProps): ReactElement {
     const translations = useTranslationsStore();
 
     const onRemove = useCallback(() => {
@@ -52,6 +54,14 @@ function DefaultActionsBar(props: ButtonsBarProps): ReactElement {
         onDownloadClick(await props.store.getDownloadUrl());
     }, [props.store]);
 
+    if (props.store.fileStatus === "rejected") {
+        return (
+            <div className={"entry-details-actions"}>
+                <RetryButton store={props.store} />
+            </div>
+        );
+    }
+
     return (
         <div className={"entry-details-actions"}>
             <ActionButton
@@ -68,7 +78,7 @@ function DefaultActionsBar(props: ButtonsBarProps): ReactElement {
             />
         </div>
     );
-}
+});
 
 function onDownloadClick(fileUrl: string | undefined): void {
     if (!fileUrl) {

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

@@ -1,33 +1,24 @@
-import { observer } from "mobx-react-lite";
 import classNames from "classnames";
+import { observer } from "mobx-react-lite";
 import { Fragment, ReactElement } from "react";
 import { FileRejection, useDropzone } from "react-dropzone";
-import { MimeCheckFormat } from "../utils/parseAllowedFormats";
 import { TranslationsStore } from "../stores/TranslationsStore";
+import { MimeCheckFormat } from "../utils/parseAllowedFormats";
 import { useTranslationsStore } from "../utils/useTranslationsStore";
 
 interface DropzoneProps {
     warningMessage?: string;
     onDrop: (files: File[], fileRejections: FileRejection[]) => void;
     maxSize: number;
-    maxFilesPerUpload: number;
     acceptFileTypes: MimeCheckFormat;
     disabled: boolean;
 }
 
 export const Dropzone = observer(
-    ({
-        warningMessage,
-        onDrop,
-        maxSize,
-        maxFilesPerUpload,
-        acceptFileTypes,
-        disabled
-    }: DropzoneProps): ReactElement => {
+    ({ warningMessage, onDrop, maxSize, acceptFileTypes, disabled }: DropzoneProps): ReactElement => {
         const { getRootProps, getInputProps, isDragAccept, isDragReject } = useDropzone({
             onDrop,
             maxSize: maxSize || undefined,
-            maxFiles: maxFilesPerUpload,
             accept: acceptFileTypes,
             disabled
         });

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

@@ -1,13 +1,13 @@
 import classNames from "classnames";
+import { observer } from "mobx-react-lite";
+import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, useCallback } from "react";
+import { ActionsBar } from "./ActionsBar";
+import { FileIcon } from "./FileIcon";
 import { ProgressBar } from "./ProgressBar";
 import { UploadInfo } from "./UploadInfo";
-import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, useCallback } from "react";
+import { FileUploaderContainerProps } from "../../typings/FileUploaderProps";
 import { FileStatus, FileStore } from "../stores/FileStore";
-import { observer } from "mobx-react-lite";
-import { FileIcon } from "./FileIcon";
 import { fileSize } from "../utils/fileSize";
-import { FileUploaderContainerProps } from "../../typings/FileUploaderProps";
-import { ActionsBar } from "./ActionsBar";
 
 interface FileEntryContainerProps {
     store: FileStore;
@@ -37,6 +37,7 @@ export const FileEntryContainer = observer(({ store, actions }: FileEntryContain
             mimeType={store.mimeType}
             fileStatus={store.fileStatus}
             errorMessage={store.errorDescription}
+            maxTotalFiles={store.maxTotalFiles}
             defaultAction={defaultListAction && store.canExecute(defaultListAction) ? onDefaultAction : undefined}
             actions={<ActionsBar actions={actions} store={store} />}
         />
@@ -51,6 +52,7 @@ interface FileEntryProps {
 
     fileStatus: FileStatus;
     errorMessage?: string;
+    maxTotalFiles: number;
 
     defaultAction?: () => void;
 
@@ -83,7 +85,7 @@ function FileEntry(props: FileEntryProps): ReactElement {
     return (
         <div
             className={classNames("file-entry", {
-                removed: props.fileStatus === "removedFile" || props.fileStatus === "removedAfterError",
+                removed: props.fileStatus === "removedFile",
                 invalid: props.fileStatus === "validationError"
             })}
             title={props.title}
@@ -115,7 +117,7 @@ function FileEntry(props: FileEntryProps): ReactElement {
                 <ProgressBar visible={props.fileStatus === "uploading"} indeterminate />
             </div>
             <div className={"entry-upload-info"}>
-                <UploadInfo status={props.fileStatus} error={props.errorMessage} />
+                <UploadInfo status={props.fileStatus} error={props.errorMessage} maxTotalFiles={props.maxTotalFiles} />
             </div>
         </div>
     );

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

@@ -3,16 +3,18 @@ import { observer } from "mobx-react-lite";
 import { ReactElement, useCallback } from "react";
 import { FileRejection } from "react-dropzone";
 
+import { Dropzone } from "./Dropzone";
+import { FileEntryContainer } from "./FileEntry";
 import { FileUploaderContainerProps } from "../../typings/FileUploaderProps";
 import { prepareAcceptForDropzone } from "../utils/prepareAcceptForDropzone";
 import { useRootStore } from "../utils/useRootStore";
-import { FileEntryContainer } from "./FileEntry";
-import { Dropzone } from "./Dropzone";
+import { useTranslationsStore } from "../utils/useTranslationsStore";
 
 import "../ui/FileUploader.scss";
 
 export const FileUploaderRoot = observer((props: FileUploaderContainerProps): ReactElement => {
     const rootStore = useRootStore(props);
+    const translations = useTranslationsStore();
 
     const onDrop = useCallback(
         (acceptedFiles: File[], fileRejections: FileRejection[]) => {
@@ -21,21 +23,27 @@ export const FileUploaderRoot = observer((props: FileUploaderContainerProps): Re
         [rootStore]
     );
 
+    let warningMessage: string | undefined;
+    if (rootStore.isFileUploadLimitReached) {
+        warningMessage = translations.get("uploadLimitReachedMessage", rootStore.maxTotalFiles.toString());
+    } else if (rootStore.createActionFailed) {
+        warningMessage = translations.get("unavailableCreateActionMessage");
+    }
+
     return (
         <div className={classNames(props.class, "widget-file-uploader")} style={props.style}>
             {!rootStore.isReadOnly && (
                 <Dropzone
                     onDrop={onDrop}
-                    warningMessage={rootStore.errorMessage}
-                    maxSize={rootStore._maxFileSize}
+                    warningMessage={warningMessage}
+                    maxSize={rootStore.maxFileSize}
                     acceptFileTypes={prepareAcceptForDropzone(rootStore.acceptedFileTypes)}
-                    maxFilesPerUpload={rootStore.maxFilesPerUpload ?? 0}
                     disabled={rootStore.isFileUploadLimitReached}
                 />
             )}
 
             <div className={"files-list"}>
-                {(rootStore.files ?? []).map(fileStore => {
+                {rootStore.sortedFiles.map(fileStore => {
                     return (
                         <FileEntryContainer
                             store={fileStore}

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

@@ -0,0 +1,31 @@
+import { observer } from "mobx-react-lite";
+import { MouseEvent, ReactElement, useCallback } from "react";
+import { FileStore } from "../stores/FileStore";
+import { useTranslationsStore } from "../utils/useTranslationsStore";
+
+interface RetryButtonProps {
+    store: FileStore;
+}
+
+export const RetryButton = observer(function RetryButton({ store }: RetryButtonProps): ReactElement {
+    const translations = useTranslationsStore();
+
+    const onClick = useCallback(
+        (e: MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            store.retry();
+        },
+        [store]
+    );
+
+    return (
+        <button
+            className="retry-button"
+            disabled={!store.canRetry}
+            onClick={onClick}
+            title={translations.get("retryButtonTextMessage")}
+        >
+            <span className="retry-icon" aria-hidden />
+        </button>
+    );
+});