@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/input-blocks/treeinput.md

@@ -0,0 +1,144 @@
+# TreeInput
+
+Inline tree with nested options and checkboxes. (Renamed from `TreeSelector`.)
+
+```yaml
+- id: tree_basic
+  type: TreeInput
+  properties:
+    primaryKey: id
+    parentKey: parentId
+    valueKey: id
+    html: "{{ item.label }}"
+    defaultExpandAll: true
+    data:
+      - id: 1
+        label: Engineering
+      - id: 2
+        label: Frontend
+        parentId: 1
+      - id: 3
+        label: Backend
+        parentId: 1
+      - id: 4
+        label: Operations
+      - id: 5
+        label: SRE
+        parentId: 4
+  events:
+    onChange:
+      - id: capture
+        type: SetState
+        params:
+          dept:
+            _event: value
+- id: tree_basic_display
+  type: Paragraph
+  properties:
+    content:
+      _nunjucks:
+        template: 'Selected: {{ dept if dept != null else "—" }}'
+        on:
+          _state: true
+```
+
+```yaml
+- id: tree_line
+  type: TreeInput
+  properties:
+    showLine: true
+    checkable: true
+    primaryKey: id
+    parentKey: parentId
+    valueKey: id
+    html: "{{ item.label }}"
+    defaultExpandAll: true
+    data:
+      - id: 1
+        label: Fruits
+      - id: 2
+        label: Apple
+        parentId: 1
+      - id: 3
+        label: Banana
+        parentId: 1
+      - id: 4
+        label: Vegetables
+      - id: 5
+        label: Carrot
+        parentId: 4
+```
+
+```yaml
+- id: tree_options
+  type: TreeInput
+  properties:
+    primaryKey: value
+    parentKey: parent
+    defaultExpandAll: true
+    options:
+      - value: eng
+        label: Engineering
+      - value: fe
+        label: Frontend
+        parent: eng
+      - value: be
+        label: Backend
+        parent: eng
+      - value: ops
+        label: Operations
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `data` | array | - | Alternative to `options`: an array of raw rows. Each row is rendered to a label with the `html` template, and `valueKey` selects which field becomes the value. Use this to drive a selector directly from data without building label/value pairs in your request. |
+| `html` | string | - | Nunjucks template that renders each option label when using `data`. The context exposes `item` (the current row) and `index` (the zero-based row index). Ignored when `options` is used. |
+| `valueKey` | string | - | Field used as the selected value. With `options` it names the value field (defaults to "value"). With `data` it names the field stored when an option is selected; omit it to store the whole row. Supports dotted paths (e.g. "user.id"). |
+| `primaryKey` | string | - | Field used to match the current value (e.g. set with SetState) back to an option for highlighting. Defaults to `valueKey`. Set this when the stored value is the whole row but a single field (e.g. "id") uniquely identifies it. In the tree selectors it also serves as each node’s id, referenced by `parentKey`. Supports dotted paths. |
+| `parentKey` | string | - | Tree selectors only: names each row’s parent id. Build a flat `data`/`options` array where each row has a `primaryKey` (its own id) and a `parentKey` whose value equals the parent row’s `primaryKey`. Rows whose `parentKey` is empty or points at no row become tree roots. Supports dotted paths. |
+| `options` | array | `[]` | Options can either be an array of primitive values, on an array of label, value pairs - supports html. |
+| `options.$.label` | string | - | Value label shown to user - supports html. |
+| `options.$.value` | string \| number \| boolean | - | Option value. |
+| `options.$.disabled` | boolean | `false` | Disable the option if true. |
+| `options.$.style` | object | - | Css style to apply to the option. |
+| `options.$.color` | string | - | Color applied to this option when it is selected. Falls back to the block-level color when not set. |
+| `disabled` | boolean | `false` | Disable the block if true. |
+| `checkable` | boolean | `false` | Show checkboxes on the tree nodes. |
+| `showLine` | boolean | `false` | Show a connecting line if true. |
+| `selectable` | boolean | `true` | Selectable if true. |
+| `defaultExpandAll` | boolean | `false` | Expand all tree nodes by default. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design tree-select tokens](https://ant.design/components/tree-select#design-token). |
+| `theme.nodeSelectedBg` | string | - | Background color of selected tree node. |
+| `theme.nodeHoverBg` | string | - | Background color of hovered tree node. |
+| `theme.titleHeight` | number | `24` | Height of tree node title. |
+| `theme.clearBg` | string | - | Background color of clear button. |
+| `theme.selectorBg` | string | - | Background color of the selector. |
+| `theme.hoverBorderColor` | string | - | Border color when hovered. |
+| `theme.activeBorderColor` | string | - | Border color when active/focused. |
+| `theme.activeOutlineColor` | string | - | Outline color when active/focused. |
+| `theme.optionSelectedBg` | string | - | Background of selected option. |
+| `theme.optionSelectedColor` | string | - | Text color of selected option. |
+| `theme.optionSelectedFontWeight` | string | - | Font weight of selected option. |
+| `theme.optionActiveBg` | string | - | Background of active (hovered) option. |
+| `theme.optionFontSize` | number | `14` | Font size of options. |
+| `theme.optionHeight` | number | `32` | Height of each option. |
+| `theme.optionLineHeight` | string | - | Line height of options. |
+| `theme.optionPadding` | string | - | Padding of options. |
+| `theme.multipleSelectorBgDisabled` | string | - | Background when disabled in multiple mode. |
+| `theme.multipleItemBg` | string | - | Background of tag items in multiple mode. |
+| `theme.multipleItemBorderColor` | string | - | Border color of tag items. |
+| `theme.multipleItemHeight` | number | `24` | Height of tag items. |
+| `theme.multipleItemHeightSM` | number | `16` | Height of tag items (small). |
+| `theme.multipleItemHeightLG` | number | `32` | Height of tag items (large). |
+| `theme.zIndexPopup` | number | `1050` | z-index of the dropdown. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onChange` | `{ value }` | Trigger action when selection is changed. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The TreeInput element. |
+
+No slots defined.

package/content/input-blocks/treemultipleselector.md

@@ -0,0 +1,162 @@
+# TreeMultipleSelector
+
+Searchable multiple-select tree dropdown (tags or checkboxes). Driven by flat `data`/`options` with `primaryKey`/`parentKey` for hierarchy.
+
+```yaml
+- id: basic_tree_multiple
+  type: TreeMultipleSelector
+  properties:
+    title: Categories
+    primaryKey: id
+    parentKey: parentId
+    valueKey: id
+    html: "{{ item.label }}"
+    treeDefaultExpandAll: true
+    data:
+      - id: 1
+        label: Electronics
+      - id: 2
+        label: Phones
+        parentId: 1
+      - id: 3
+        label: Laptops
+        parentId: 1
+      - id: 4
+        label: Clothing
+      - id: 5
+        label: Shirts
+        parentId: 4
+      - id: 6
+        label: Shoes
+        parentId: 4
+```
+
+```yaml
+- id: checkable_tree_multiple
+  type: TreeMultipleSelector
+  properties:
+    title: Permissions
+    checkable: true
+    showCheckedStrategy: SHOW_CHILD
+    primaryKey: id
+    parentKey: parentId
+    valueKey: id
+    html: "{{ item.label }}"
+    treeDefaultExpandAll: true
+    data:
+      - id: 1
+        label: Read
+      - id: 2
+        label: Write
+      - id: 3
+        label: Create
+        parentId: 2
+      - id: 4
+        label: Update
+        parentId: 2
+      - id: 5
+        label: Admin
+  events:
+    onChange:
+      - id: capture
+        type: SetState
+        params:
+          perms:
+            _event: value
+- id: checkable_tree_display
+  type: Paragraph
+  properties:
+    content:
+      _nunjucks:
+        template: "Selected: {{ perms }}"
+        on:
+          _state: true
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `data` | array | - | Alternative to `options`: an array of raw rows. Each row is rendered to a label with the `html` template, and `valueKey` selects which field becomes the value. Use this to drive a selector directly from data without building label/value pairs in your request. |
+| `html` | string | - | Nunjucks template that renders each option label when using `data`. The context exposes `item` (the current row) and `index` (the zero-based row index). Ignored when `options` is used. |
+| `valueKey` | string | - | Field used as the selected value. With `options` it names the value field (defaults to "value"). With `data` it names the field stored when an option is selected; omit it to store the whole row. Supports dotted paths (e.g. "user.id"). |
+| `primaryKey` | string | - | Field used to match the current value (e.g. set with SetState) back to an option for highlighting. Defaults to `valueKey`. Set this when the stored value is the whole row but a single field (e.g. "id") uniquely identifies it. In the tree selectors it also serves as each node’s id, referenced by `parentKey`. Supports dotted paths. |
+| `parentKey` | string | - | Tree selectors only: names each row’s parent id. Build a flat `data`/`options` array where each row has a `primaryKey` (its own id) and a `parentKey` whose value equals the parent row’s `primaryKey`. Rows whose `parentKey` is empty or points at no row become tree roots. Supports dotted paths. |
+| `options` | array | `[]` | Options can either be an array of primitive values, on an array of label, value pairs - supports html. |
+| `options.$.label` | string | - | Value label shown to user - supports html. |
+| `options.$.value` | string \| number \| boolean | - | Option value. |
+| `options.$.disabled` | boolean | `false` | Disable the option if true. |
+| `options.$.style` | object | - | Css style to apply to the option. |
+| `options.$.color` | string | - | Color applied to this option when it is selected. Falls back to the block-level color when not set. |
+| `label` | object | - | Label properties. |
+| `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
+| `label.colon` | boolean | `true` | Append label with colon. |
+| `label.extra` | string | - | Extra text to display beneath the content - supports html. |
+| `label.title` | string | - | Label title - supports html. |
+| `label.tooltip` | string \| object | - | Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon. |
+| `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
+| `label.tooltip.color` | string | - | Color of the tooltip icon. |
+| `label.span` | number | - | Label inline span. |
+| `label.disabled` | boolean | `false` | Hide input label. |
+| `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
+| `label.inline` | boolean | `false` | Render input and label inline. |
+| `disabled` | boolean | `false` | Disable the block if true. |
+| `autoFocus` | boolean | `false` | Autofocus to the block on page load. |
+| `allowClear` | boolean | `true` | Allow the user to clear their input. |
+| `bordered` | boolean | `true` | Whether or not the input has a border style. Deprecated, use variant instead. |
+| `variant` | string | - | Input visual variant. When set, takes precedence over bordered. Enum: `outlined`, `filled`, `borderless`. |
+| `size` | string | `"default"` | Size of the block. Enum: `small`, `default`, `large`. |
+| `title` | string | - | Title to describe the input component, if no title is specified the block id is displayed - supports html. |
+| `placeholder` | string | `"Select items"` | Placeholder text inside the block before user types input. |
+| `showSearch` | boolean | `true` | Make the tree searchable. |
+| `treeDefaultExpandAll` | boolean | `false` | Expand all tree nodes by default. |
+| `checkable` | boolean | `false` | Show checkboxes on the tree nodes instead of selectable tags. |
+| `showCheckedStrategy` | string | `"SHOW_CHILD"` | How checked nodes are shown when `checkable` is true: SHOW_ALL (all checked), SHOW_PARENT (parent only), SHOW_CHILD (leaf children only). Enum: `SHOW_ALL`, `SHOW_PARENT`, `SHOW_CHILD`. |
+| `maxTagCount` | number | - | Maximum number of selected tags shown before collapsing into a count. |
+| `notFoundContent` | string | `"Not found"` | Content shown when no nodes match the search. |
+| `suffixIcon` | string \| object | `"AiOutlineDown"` | Dropdown suffix icon. |
+| `clearIcon` | string \| object | `"AiOutlineCloseCircle"` | Clear icon. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design tree-select tokens](https://ant.design/components/tree-select#design-token). |
+| `theme.nodeSelectedBg` | string | - | Background color of selected tree node. |
+| `theme.nodeHoverBg` | string | - | Background color of hovered tree node. |
+| `theme.titleHeight` | number | `24` | Height of tree node title. |
+| `theme.clearBg` | string | - | Background color of clear button. |
+| `theme.selectorBg` | string | - | Background color of the selector. |
+| `theme.hoverBorderColor` | string | - | Border color when hovered. |
+| `theme.activeBorderColor` | string | - | Border color when active/focused. |
+| `theme.activeOutlineColor` | string | - | Outline color when active/focused. |
+| `theme.optionSelectedBg` | string | - | Background of selected option. |
+| `theme.optionSelectedColor` | string | - | Text color of selected option. |
+| `theme.optionSelectedFontWeight` | string | - | Font weight of selected option. |
+| `theme.optionActiveBg` | string | - | Background of active (hovered) option. |
+| `theme.optionFontSize` | number | `14` | Font size of options. |
+| `theme.optionHeight` | number | `32` | Height of each option. |
+| `theme.optionLineHeight` | string | - | Line height of options. |
+| `theme.optionPadding` | string | - | Padding of options. |
+| `theme.multipleSelectorBgDisabled` | string | - | Background when disabled in multiple mode. |
+| `theme.multipleItemBg` | string | - | Background of tag items in multiple mode. |
+| `theme.multipleItemBorderColor` | string | - | Border color of tag items. |
+| `theme.multipleItemHeight` | number | `24` | Height of tag items. |
+| `theme.multipleItemHeightSM` | number | `16` | Height of tag items (small). |
+| `theme.multipleItemHeightLG` | number | `32` | Height of tag items (large). |
+| `theme.zIndexPopup` | number | `1050` | z-index of the dropdown. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onBlur` | \- | Trigger action when the selector loses focus. |
+| `onChange` | `{ value }` | Trigger action when selection is changed. |
+| `onFocus` | \- | Trigger action when the selector gains focus. |
+| `onClear` | \- | Trigger action when the selector is cleared. |
+| `onSearch` | `{ value }` | Trigger action when the search input changes. |
+| `onTooltipClick` | \- | Trigger actions when the tooltip icon is clicked. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The TreeMultipleSelector element. |
+| `/label` | The TreeMultipleSelector label. |
+| `/extra` | The TreeMultipleSelector extra content. |
+| `/feedback` | The TreeMultipleSelector validation feedback. |
+| `/suffixIcon` | The suffix icon in the TreeMultipleSelector. |
+| `/clearIcon` | The clear icon in the TreeMultipleSelector. |
+
+No slots defined.

package/content/input-blocks/treeselector.md

@@ -0,0 +1,185 @@
+# TreeSelector
+
+Searchable single-select tree dropdown. Driven by flat `data`/`options` with `primaryKey`/`parentKey` for hierarchy.
+
+```yaml
+- id: basic_tree_selector
+  type: TreeSelector
+  properties:
+    title: Category
+    primaryKey: id
+    parentKey: parentId
+    valueKey: id
+    html: "{{ item.label }}"
+    treeDefaultExpandAll: true
+    data:
+      - id: 1
+        label: Electronics
+      - id: 2
+        label: Phones
+        parentId: 1
+      - id: 3
+        label: Laptops
+        parentId: 1
+      - id: 4
+        label: Clothing
+      - id: 5
+        label: Shirts
+        parentId: 4
+      - id: 6
+        label: Shoes
+        parentId: 4
+```
+
+```yaml
+- id: value_tree_selector
+  type: TreeSelector
+  properties:
+    title: Region
+    placeholder: Pick a region...
+    primaryKey: id
+    parentKey: parentId
+    valueKey: code
+    html: "{{ item.label }}"
+    treeDefaultExpandAll: true
+    data:
+      - id: 1
+        label: Europe
+        code: eu
+      - id: 2
+        label: Germany
+        code: de
+        parentId: 1
+      - id: 3
+        label: France
+        code: fr
+        parentId: 1
+      - id: 4
+        label: Americas
+        code: am
+      - id: 5
+        label: United States
+        code: us
+        parentId: 4
+  events:
+    onChange:
+      - id: capture
+        type: SetState
+        params:
+          region:
+            _event: value
+- id: value_tree_display
+  type: Paragraph
+  properties:
+    content:
+      _nunjucks:
+        template: 'Selected code: {{ region if region != null else "—" }}'
+        on:
+          _state: true
+```
+
+```yaml
+- id: options_tree_selector
+  type: TreeSelector
+  properties:
+    title: Department
+    primaryKey: value
+    parentKey: parent
+    treeDefaultExpandAll: true
+    options:
+      - value: eng
+        label: Engineering
+      - value: fe
+        label: Frontend
+        parent: eng
+      - value: be
+        label: Backend
+        parent: eng
+      - value: ops
+        label: Operations
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `data` | array | - | Alternative to `options`: an array of raw rows. Each row is rendered to a label with the `html` template, and `valueKey` selects which field becomes the value. Use this to drive a selector directly from data without building label/value pairs in your request. |
+| `html` | string | - | Nunjucks template that renders each option label when using `data`. The context exposes `item` (the current row) and `index` (the zero-based row index). Ignored when `options` is used. |
+| `valueKey` | string | - | Field used as the selected value. With `options` it names the value field (defaults to "value"). With `data` it names the field stored when an option is selected; omit it to store the whole row. Supports dotted paths (e.g. "user.id"). |
+| `primaryKey` | string | - | Field used to match the current value (e.g. set with SetState) back to an option for highlighting. Defaults to `valueKey`. Set this when the stored value is the whole row but a single field (e.g. "id") uniquely identifies it. In the tree selectors it also serves as each node’s id, referenced by `parentKey`. Supports dotted paths. |
+| `parentKey` | string | - | Tree selectors only: names each row’s parent id. Build a flat `data`/`options` array where each row has a `primaryKey` (its own id) and a `parentKey` whose value equals the parent row’s `primaryKey`. Rows whose `parentKey` is empty or points at no row become tree roots. Supports dotted paths. |
+| `options` | array | `[]` | Options can either be an array of primitive values, on an array of label, value pairs - supports html. |
+| `options.$.label` | string | - | Value label shown to user - supports html. |
+| `options.$.value` | string \| number \| boolean | - | Option value. |
+| `options.$.disabled` | boolean | `false` | Disable the option if true. |
+| `options.$.style` | object | - | Css style to apply to the option. |
+| `options.$.color` | string | - | Color applied to this option when it is selected. Falls back to the block-level color when not set. |
+| `label` | object | - | Label properties. |
+| `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
+| `label.colon` | boolean | `true` | Append label with colon. |
+| `label.extra` | string | - | Extra text to display beneath the content - supports html. |
+| `label.title` | string | - | Label title - supports html. |
+| `label.tooltip` | string \| object | - | Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon. |
+| `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
+| `label.tooltip.color` | string | - | Color of the tooltip icon. |
+| `label.span` | number | - | Label inline span. |
+| `label.disabled` | boolean | `false` | Hide input label. |
+| `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
+| `label.inline` | boolean | `false` | Render input and label inline. |
+| `disabled` | boolean | `false` | Disable the block if true. |
+| `autoFocus` | boolean | `false` | Autofocus to the block on page load. |
+| `allowClear` | boolean | `true` | Allow the user to clear their input. |
+| `bordered` | boolean | `true` | Whether or not the input has a border style. Deprecated, use variant instead. |
+| `variant` | string | - | Input visual variant. When set, takes precedence over bordered. Enum: `outlined`, `filled`, `borderless`. |
+| `size` | string | `"default"` | Size of the block. Enum: `small`, `default`, `large`. |
+| `title` | string | - | Title to describe the input component, if no title is specified the block id is displayed - supports html. |
+| `placeholder` | string | `"Select item"` | Placeholder text inside the block before user types input. |
+| `showSearch` | boolean | `true` | Make the tree searchable. |
+| `treeDefaultExpandAll` | boolean | `false` | Expand all tree nodes by default. |
+| `notFoundContent` | string | `"Not found"` | Content shown when no nodes match the search. |
+| `suffixIcon` | string \| object | `"AiOutlineDown"` | Dropdown suffix icon. |
+| `clearIcon` | string \| object | `"AiOutlineCloseCircle"` | Clear icon. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design tree-select tokens](https://ant.design/components/tree-select#design-token). |
+| `theme.nodeSelectedBg` | string | - | Background color of selected tree node. |
+| `theme.nodeHoverBg` | string | - | Background color of hovered tree node. |
+| `theme.titleHeight` | number | `24` | Height of tree node title. |
+| `theme.clearBg` | string | - | Background color of clear button. |
+| `theme.selectorBg` | string | - | Background color of the selector. |
+| `theme.hoverBorderColor` | string | - | Border color when hovered. |
+| `theme.activeBorderColor` | string | - | Border color when active/focused. |
+| `theme.activeOutlineColor` | string | - | Outline color when active/focused. |
+| `theme.optionSelectedBg` | string | - | Background of selected option. |
+| `theme.optionSelectedColor` | string | - | Text color of selected option. |
+| `theme.optionSelectedFontWeight` | string | - | Font weight of selected option. |
+| `theme.optionActiveBg` | string | - | Background of active (hovered) option. |
+| `theme.optionFontSize` | number | `14` | Font size of options. |
+| `theme.optionHeight` | number | `32` | Height of each option. |
+| `theme.optionLineHeight` | string | - | Line height of options. |
+| `theme.optionPadding` | string | - | Padding of options. |
+| `theme.multipleSelectorBgDisabled` | string | - | Background when disabled in multiple mode. |
+| `theme.multipleItemBg` | string | - | Background of tag items in multiple mode. |
+| `theme.multipleItemBorderColor` | string | - | Border color of tag items. |
+| `theme.multipleItemHeight` | number | `24` | Height of tag items. |
+| `theme.multipleItemHeightSM` | number | `16` | Height of tag items (small). |
+| `theme.multipleItemHeightLG` | number | `32` | Height of tag items (large). |
+| `theme.zIndexPopup` | number | `1050` | z-index of the dropdown. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onBlur` | \- | Trigger action when the selector loses focus. |
+| `onChange` | `{ value }` | Trigger action when selection is changed. |
+| `onFocus` | \- | Trigger action when the selector gains focus. |
+| `onClear` | \- | Trigger action when the selector is cleared. |
+| `onSearch` | `{ value }` | Trigger action when the search input changes. |
+| `onTooltipClick` | \- | Trigger actions when the tooltip icon is clicked. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The TreeSelector element. |
+| `/label` | The TreeSelector label. |
+| `/extra` | The TreeSelector extra content. |
+| `/feedback` | The TreeSelector validation feedback. |
+| `/suffixIcon` | The suffix icon in the TreeSelector. |
+| `/clearIcon` | The clear icon in the TreeSelector. |
+
+No slots defined.

package/content/input-blocks/upload.md

@@ -0,0 +1,149 @@
+# Upload
+
+Upload files to any storage provider with a button trigger — AWS S3 (and S3-compatible services like Cloudflare R2 and MinIO), Google Cloud Storage, or Azure Blob Storage. The block calls an upload-policy request by id (`uploadPolicyRequestId`) and uploads the file directly from the browser to the provider. Set `emitFileContent: true` to instead emit the file as `{ name, size, type, content }` (base64) for server-side storage through an API endpoint routine. Supports file type filtering, upload limits, and custom button styling.
+
+> The Upload block requires an upload-policy request (AwsS3PresignedPostPolicy, GcsSignedPostPolicy, or AzureBlobUploadSas) referenced by uploadPolicyRequestId, unless emitFileContent is true. The examples on this page demonstrate UI configuration only — uploads will not function without a configured storage connection.
+
+```yaml
+- id: basic_default
+  type: Upload
+  properties:
+    uploadPolicyRequestId: upload_policy_request
+- id: basic_custom_title
+  type: Upload
+  properties:
+    uploadPolicyRequestId: upload_policy_request
+    button:
+      icon: UploadOutlined
+      title: Choose File
+      type: default
+- id: basic_custom_icon
+  type: Upload
+  properties:
+    uploadPolicyRequestId: upload_policy_request
+    button:
+      icon: AiOutlineCloudUpload
+      title: Upload to Cloud
+      type: default
+```
+
+```yaml
+- id: accept_images
+  type: Upload
+  properties:
+    uploadPolicyRequestId: upload_policy_request
+    accept: image/*
+    button:
+      icon: AiOutlinePicture
+      title: Upload Image
+      type: default
+- id: accept_pdf
+  type: Upload
+  properties:
+    uploadPolicyRequestId: upload_policy_request
+    accept: .pdf
+    button:
+      icon: AiOutlineFilePdf
+      title: Upload PDF
+      type: default
+```
+
+```yaml
+- id: limit_single
+  type: Upload
+  properties:
+    uploadPolicyRequestId: upload_policy_request
+    singleFile: true
+    button:
+      icon: UploadOutlined
+      title: Upload Single File
+      type: default
+- id: limit_max_three
+  type: Upload
+  properties:
+    uploadPolicyRequestId: upload_policy_request
+    maxCount: 3
+    button:
+      icon: UploadOutlined
+      title: Upload (Max 3)
+      type: default
+```
+
+```yaml
+- id: emit_file_content
+  type: Upload
+  properties:
+    emitFileContent: true
+    singleFile: true
+    button:
+      icon: UploadOutlined
+      title: Attach File
+      type: default
+```
+
+```yaml
+- id: disabled_default
+  type: Upload
+  properties:
+    uploadPolicyRequestId: upload_policy_request
+    disabled: true
+```
+
+```yaml
+- id: label_default
+  type: Upload
+  properties:
+    title: Upload Attachment
+    uploadPolicyRequestId: upload_policy_request
+- id: label_extra
+  type: Upload
+  properties:
+    title: Upload Document
+    uploadPolicyRequestId: upload_policy_request
+    label:
+      extra: Accepted formats are PDF, DOCX, and PNG. Max size 10MB.
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `accept` | string | - | File types accepted by the input. See html file type input accept property at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept. |
+| `button` | object | `{"icon":"UploadOutlined","title":"Upload","type":"default"}` | Button block properties. See [Button](/Button) for all properties. |
+| `button.title` | string | - | Button title text. |
+| `button.icon` | string \| object | - | Button icon name or Icon block properties. |
+| `button.type` | string | `"default"` | Button type. Enum: `default`, `primary`, `dashed`, `text`, `link`. |
+| `button.danger` | boolean | `false` | Set button style to danger. |
+| `button.disabled` | boolean | `false` | Disable the button. |
+| `button.size` | string | `"default"` | Button size. Enum: `small`, `default`, `large`. |
+| `disabled` | boolean | - | Disable the file input. |
+| `emitFileContent` | boolean | `false` | Instead of uploading, read the file and emit { name, size, type, content } — content a base64 string — as the block value and onChange event. Use with a CallAPI action to store the file with a server-side write request (e.g. AwsS3PutObject). Replaces uploadPolicyRequestId. |
+| `maxCount` | number | - | Maximum number of files that can be uploaded. |
+| `uploadPolicyRequestId` | string | - | Id of an upload-policy request (e.g. AwsS3PresignedPostPolicy, GcsSignedPostPolicy, AzureBlobUploadSas) that defines to which storage bucket and how the file should be uploaded. Required unless emitFileContent is true. |
+| `showUploadList` | boolean | `true` | Whether to show default upload list. |
+| `singleFile` | boolean | `false` | Only allow a single file to be uploaded. Only one file can be selected in the prompt. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/upload#design-token). See [Ant Design upload tokens](https://ant.design/components/upload#design-token). |
+| `theme.actionsColor` | string | - | Color of action icons (download, preview, remove). |
+| `theme.pictureCardSize` | number | - | Size of list items in card type (affects both picture-card and picture-circle). |
+| `theme.controlItemBgHover` | string | - | Background color of file item on hover. |
+| `theme.colorIcon` | string | - | Color of file icons. |
+| `theme.fontSize` | number | - | Font size of file name text. |
+| `theme.borderRadiusSM` | number | - | Border radius of file list items. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onBeforeUpload` | `{ file }` | Triggered before a file is uploaded. If an action throws, the upload is cancelled. |
+| `onChange` | \- | Triggered when the upload state is changing. With emitFileContent, triggered once the file content has been read, with the block value ({ file, fileList }) as the event, where file includes the base64 content. |
+| `onProgress` | `{ file, fileList }` | Triggered when the upload state is in progress. |
+| `onSuccess` | `{ file, fileList }` | Triggered when the upload state is done uploading. |
+| `onRemove` | `{ file, fileList }` | Triggered when the upload has been removed. |
+| `onError` | `{ file, fileList }` | Triggered when the upload has failed. |
+| `onClick` | \- | Triggered when the upload button is clicked. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The outer block wrapper around the upload button and list. |
+| `/trigger` | The antd upload trigger (.ant-upload-select) that wraps the button. |
+| `/list` | The uploaded file list container. |
+| `/item` | Each uploaded file row in the list. |
+
+No slots defined.