FileUpload nativelite

A drop zone with a browse button; files reach the host via upload, which lists them back in files.

Children: none

Preview

Loading the renderer…

label

namerequired

multiple

maxSize

hint

disabled

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "FileUpload",
          "label": "Attachments",
          "name": "attachments",
          "accept": "image/*",
          "multiple": true
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

FileUpload rendered by the React renderer on Web — **Web** React

FileUpload rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

FileUpload rendered by the Compose renderer on Android — **Android** Compose

FileUpload rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-file-upload, painted by each native renderer.

Variants

disabled

Props

Prop	Type	Default	Description
`label`	`string`	–	The field label.
`name`required	`string`	–	The field's key in the submitted data.
`accept`	`string`	–	Accepted types, comma-separated (`image/*,.pdf`).
`multiple`	`boolean`	`false`	Allows more than one file.
`maxSize`	`number`	–	Max bytes per file; bigger ones are refused.
`files`bind	`[file]`	–	The attached files, each removable.
`hint`	`string`	–	Text under the drop zone's title.
`disabled`	`boolean`	`false`	Shows it inert.

Events and slots

Name	Kind
`on.upload`	event: runs an action
`on.remove`	event: runs an action

Accessibility

Role: button
Semantics: button (the drop zone) + a list of files with remove buttons

Keys	Action
`EnterSpace on the drop zone`	open the file picker
–	Tab reaches each file's remove button

Theming

Recipe parts: FileUpload/rootFileUpload/labelFileUpload/dropzoneFileUpload/iconFileUpload/hintFileUpload/fileFileUpload/fileNameFileUpload/fileMetaFileUpload/removeFileUpload/descriptionFileUpload/errorFileUpload/titleFileUpload/browseFileUpload/fileIcon
Keyed by: multipledisabled:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme