Components

FileImporter

FileImporter presents a button-backed file picker and forwards selected files to your app.

Examples

Default

Preview unavailable for this example in the static docs build.

Show code

function DemoFileImporter() {
  const [value, setValue] = useState('No file selected')

  return (
    <VStack spacing={12}>
      <FileImporter onSelect={(files) => setValue(files.map((file) => file.name).join(', '))}>
        Import file
      </FileImporter>
      <Text>{value}</Text>
    </VStack>
  )
}

Multiple Selection

Preview unavailable for this example in the static docs build.

Show code

<VStack spacing={12}>
      <FileImporter
        allowedContentTypes={['image/png', 'image/jpeg']}
        allowsMultipleSelection
        onSelect={() => undefined}
      >
        Import images
      </FileImporter>
      <Text>Uses SwiftUI-style selection aliases for accepted content types and multiple selection.</Text>
    </VStack>

API

Prop	Type	Required	Description
`accept`	`string`	No	Accepted file types.
`allowedContentTypes`	`string[]`	No	SwiftUI-aligned alias for accepted file types.
`multiple`	`boolean`	No	Whether multiple files can be selected. Default: `false`
`allowsMultipleSelection`	`boolean`	No	SwiftUI-aligned alias for multiple selection. Default: `false`
`onSelect`	`(files: Array<globalThis.File>) => void`	Yes	Called with the selected files.

Inherits additional props from Omit<IBaseElementComponent<'button'>, 'type' | 'onSelect'>.

Overview

FileImporter presents a button-backed file picker and forwards selected files to your app.

Notes

allowedContentTypes and allowsMultipleSelection are the preferred SwiftUI-aligned props.
The hidden input is reset after each selection so the same file can be chosen again in a subsequent import flow.

Divider

Divider is a visual element that can be used to separate other content. Dividers are commonly used in Lists to separate items and create visual hierarchy.

ForEach

ForEach is a utility function for rendering arrays of data. ForEach is a helper function that maps over an array and renders each item.

FileImporter

Examples

API

Overview

Notes

On this page