Components

FileImporter

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

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { useState } from 'react';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { FileImporter } from '@swiftuijs/ui';
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>);
}
export default function Example() {
    return (<DemoFileImporter />);
}

Usage and limitations

  • 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.

More examples

Multiple Selection

API reference

PropTypeRequiredDescription
acceptstringNoAccepted file types.
allowedContentTypesstring[]NoSwiftUI-aligned alias for accepted file types.
multiplebooleanNoWhether multiple files can be selected. Default: false
allowsMultipleSelectionbooleanNoSwiftUI-aligned alias for multiple selection. Default: false
onSelect(files: Array<globalThis.File>) => voidYesCalled with the selected files.

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

Edit this page on GitHubReport an issue

Divider

Separate adjacent content with a decorative line.

ForEach

Render an array with a stable key and a render function.