Multiple File Input

Tips & examples

A multi-file action trigger button decorated with a cloud-and-arrow upload icon that opens a browser file picker allowing batch selection. Displays a staged list of selected files with individual trash bin icons for easy removal before upload.

When to use

Allowing users to select, upload, and manage multiple binary files simultaneously inside form workflows.
Binding arrays of uploaded file references or file path collections to backend database records while enforcing access permissions and file extension filters.

What you need

Disabled by default until a default_form is present on the page layout. Requires selecting an Element ID and a target Field Path to bind multi-file upload arrays to form payloads.

Form-bound array properties containing file path strings, multiple media URLs, or storage object key collections.
Data Source section attributes remain locked until a default_form is actively placed in the workspace hierarchy.

Examples

A multi-file attachment uploader bound to an expense report form field (['receiptFiles']) configured with image/*,.pdf browser picker filters.
An insurance claim form allowing users to select and stage multiple inspection photos or documents before form submission.

Avoid

Using when users should only attach a single file — use storage_file_input instead.
Attempting to map Data Source form bindings before adding a parent default_form container onto the canvas layout.
Leaving the ‘Accept’ extension filter completely empty when expecting specific multi-file formats (e.g. PDF attachments or image batches).

Use instead

File Input — The workflow requires capturing only one file attachment at a time rather than a list of files.

Pairs well with

Form — Provides the underlying form context, validation handling, and multi-file payload submission engine.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Data Source

Element IDrequiredNumber or TextInside `dataSource`: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or NumberInside `dataSource`: Path into the source element’s data (property segments).
Default: none

Advanced

Access Group NamerequiredText: Controls access role permissions governing who can view or download uploaded files once stored in the system.
Default: public
Type Group NamerequiredText: Categorizes the uploaded multi-file asset items in storage system registries.
Default: image
AcceptoptionalText: Browser-side file type filter string for the native multi-file picker (e.g., ‘image/*’ for images, ‘.pdf’ for PDFs, ‘.doc,.docx’ for Word files).
Example image/*,application/pdf
Default: none

Input

DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example false
Default: none

Sizing

Minimum size: 3 × 1 grid cells (width × height).

Translatable labels

label — Text label rendered on the face of the multi-file trigger button alongside the upload icon.

Accessibility

Renders an accessible multiple file input (<input type='file' multiple>). Keyboard navigation moves sequentially through the upload trigger and individual staged file removal buttons.

Spacebar or Enter triggers the browser multi-file chooser dialog.
Tab navigates between the upload button and individual file trash bin icons in the staged list.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myMultipleFilesInput.<property>

value Array<string> Current input value of this control. elements.myMultipleFilesInput.value.length

When The stored paths of the uploaded files, in upload order. Read `.length` to show how many are attached.

errors any Field-level validation errors after submit or blur. elements.myMultipleFilesInput.errors

touched boolean Map of fields the user has interacted with. elements.myMultipleFilesInput.touched

loading boolean True while data is loading from the server. elements.myMultipleFilesInput.loading

When True while any upload in the set is still running. Disable Save with it so the record is not stored before every attachment exists.

metadata Array<object> | any Additional server metadata for the current result set. elements.myMultipleFilesInput.metadata

files Array<file> All currently selected files, including their names and sizes. elements.myMultipleFilesInput.files

uploadError string Error message if the last upload failed. elements.myMultipleFilesInput.uploadError

metadataError string Error message if the file details could not be loaded. elements.myMultipleFilesInput.metadataError

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myMultipleFilesInput.value

Replace myMultipleFilesInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Placement notes

Form — Can be nested directly inside or placed alongside form layouts. When a form is linked as a data source, it transitions behavior from local state management to form-bound schema state tracking.

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
6
{
  "config": {
    "accessGroupName": "accessGroupName",
    "typeGroupName": "typeGroupName"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": "defaultValue",
    "disabled": false,
    "nullable": false,
    "accessGroupName": "accessGroupName",
    "typeGroupName": "typeGroupName",
    "accept": "accept",
    "name": "name"
  }
}

Ready-made setups

Form-Bound Batch Document Uploader ↕

Configures a 6x1 multiple storage file input bound to a form field array, allowing users to select multiple PDFs and images with access group permissions.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "config": {
    "dataSource": {
      "elementId": "claimSubmissionForm",
      "fieldPath": [
        "attachmentFiles"
      ]
    },
    "advanced": {
      "accessGroupName": "Claims_Reviewers",
      "typeGroupName": "document",
      "accept": "image/*,.pdf"
    },
    "translation": {
      "label": "Attach Supporting Documents"
    },
    "input": {
      "disabled": "@@expression: false",
      "nullable": "@@expression: false"
    }
  }
}