Available starting with FlowX.AI 5.5.0Multiple File Upload (
BULK_FILE_UPLOAD) is a new UI component for handling batch file uploads with built-in validation, feedback, and theming support. Available in the React SDK for process-based screens.
Overview
Unlike the File Upload Button, which handles one file at a time via a button click, the Multiple File Upload component offers:Batch uploads
Upload multiple files in a single request with individual validation per file
Drag and drop
Drag-and-drop zone with click-to-browse fallback
File management
Preview selected files with name, size, and a remove option before uploading
Component properties
The following properties are available in the Multiple File Upload configuration panel:Display
| Property | Key | Description | Default |
|---|---|---|---|
| Title | title | Heading displayed in the drop zone | "Drag & drop your files here" |
| Subtitle | subtitle | Supporting text below the title | "or click to browse your files" |
| Browse label | browseLabel | Text on the browse button | "Browse Files" |
| Upload label | uploadLabel | Text on the upload action button | "Upload Files" |
| Reset label | resetLabel | Text on the remove/reset button | "Remove Files" |
Validation
| Property | Key | Description | Default | Required |
|---|---|---|---|---|
| Accepted file types | accept | Comma-separated MIME types, extensions, or wildcards (e.g., png, application/pdf, image/*) | — | Yes |
| Invalid file type message | invalidFileType | Error shown when a file does not match accepted types | — | Yes |
| Max files | maxFiles | Maximum number of files allowed per upload | — | Yes |
| Max files exceeded message | filesExceeded | Error shown when the file count exceeds the limit | — | Yes |
| Max files size | maxFilesSize | Maximum total size of all files in bytes | — | Yes |
| Files size exceeded message | filesSizeExceeded | Error shown when total size exceeds the limit | — | Yes |
Feedback
| Property | Key | Description | Default |
|---|---|---|---|
| Show success | showSuccess | Display a toast notification on successful upload | false |
| Success message | successMessage | Custom success toast text | "Files successfully uploaded" |
| Show error | showError | Display a toast notification on upload failure | false |
| Error message | errorMessage | Custom error toast text | "There was an error with the upload" |
| Loading type | loading | Loading indicator style (Overlay or None) | None |
| Loading message | loadingMessage | Text displayed during the upload | "Files are being uploaded..." |
Visibility
| Property | Key | Description |
|---|---|---|
| Hide condition | hide | Expression that hides the component when it evaluates to true |
| Disabled condition | disabled | Expression that disables the component when it evaluates to true |
UI action configuration
The Multiple File Upload component only supports the Upload action type. When configuring the UI action for this component, set:- Event type:
CLICK - Action type:
Upload
{actionName}TempFileIds (a list of UUIDs) in the process instance params before triggering the action.
Starting with 5.5.0, the existing File Upload Button is also adjusted so that Upload is its only selectable action type (matching this component). It continues to work with the single-file path (
{actionName}TempFileId). Both components can coexist in the same process.How it works
User selects files
The user drags files into the drop zone or clicks Browse Files to select them. Each file is validated against the configured accepted types, max files count, and max file size.
Files uploaded to temporary storage
When the user clicks Upload Files, the SDK sends all selected files in a single
multipart/form-data request to the document plugin’s bulk temp upload endpoint. The response returns a list of temporary file IDs.Process action triggered
The SDK populates
{actionName}TempFileIds with the list of temp file IDs and triggers the Upload File action. The process engine detects the list key and routes the request through the bulk Kafka path.Important behavior
Document type and storage
Document type and storage
All files uploaded through this component share the same
customId and use documentType=BULK with shouldOverride=false. This means:- Multiple files accumulate under the same
customId— they are stored as separate documents, not as a single archive - Re-uploading does not replace previous files — it adds new ones alongside the existing documents
- If you need to replace previously uploaded files, you must delete them separately before re-uploading
Validation scope
Validation scope
Validation runs client-side before upload:
- File type — validated per file against the
acceptproperty - File count — validated against
maxFiles(total selected files) - Total size — validated against
maxFilesSize(sum of all file sizes)
Upload feedback
Upload feedback
The component provides an overall loading state (overlay or none) during the upload. Individual per-file progress indicators are not available — the upload is treated as a single batch operation.After the upload completes, the component clears its state (file list), hides the loader, and shows a success or error toast (if configured).
File selection UX
File selection UX
Users can add files incrementally:
- Drag and drop files into the zone multiple times
- Click Browse Files multiple times to add more
- Each selected file appears as a card showing file name and size
- Individual files can be removed with the delete button before uploading
- The Remove Files button clears all selected files at once
Theming
The Multiple File Upload component supports full theming through Theme Admin. The component is registered undercontentWeb → components → bulkFileUpload.
- Drop zone
- File items
- Caption
| Token | Description |
|---|---|
| Title font | Font style for the drop zone heading |
| Title color | Color for the drop zone heading |
| Subtitle font | Font style for the subtitle text |
| Subtitle color | Color for the subtitle text |
| Border width | Drop zone border width (inherits from general) |
| Border radius | Drop zone corner radius (inherits from general) |
| Border color | Drop zone border color |
| Background color | Drop zone background |
| Shadow | Drop zone shadow |
Icons
The component uses three system icons that are included automatically via CMS migration:| Icon key | Description |
|---|---|
sys_BFUTitle | Icon displayed in the drop zone header |
sys_BFUDocument | Icon displayed next to each file in the list |
sys_BFUDelete | Icon for the delete/remove button on each file |
Substitution tags
The component also registers system substitution tags for localization and accessibility:| Tag code | English | Romanian |
|---|---|---|
sys_bfu_max_files_size | Maximum files size: | Dimensiune maximă a fișierelor: |
sys_a11y_bfu_drop_files | Drop files | Plasează fișierele |
sys_a11y_bfu_delete_file | Delete file | Șterge fișier |