FileTrigger

A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.

acceptedFileTypes

allowsMultiple

acceptDirectory

defaultCamera

import {FileTrigger} from 'react-aria-components';
import {Button} from './Button';
import {useState} from 'react';

function Example(props) {
  let [files, setFiles] = useState<string[]>([]);

  return (
    <>
      <FileTrigger
        {...props}
        acceptedFileTypes={["image/*"]}
        onSelect={(e) => {
          let files = e ? Array.from(e) : [];
          let filenames = files.map((file) => file.name);
          setFiles(filenames);
        }}>
        <Button>Select a file</Button>
      </FileTrigger>
      {files.join(', ')}
    </>
  );
}

Custom trigger

FileTrigger works with any pressable React Aria component (e.g. Button, Link, etc.). Use the <Pressable> component or usePress hook to wrap a custom trigger element such as a third party component or DOM element.

Custom trigger

import {Pressable, FileTrigger} from 'react-aria-components';

<FileTrigger>
  <Pressable>
    <span role="button">Custom trigger</span>
  </Pressable>
</FileTrigger>

Accessibility

Any <Pressable> child must have an interactive ARIA role or use an appropriate semantic HTML element so that screen readers can announce the trigger. Trigger components must forward their ref and spread all props to a DOM element.

const CustomTrigger = React.forwardRef((props, ref) => (
  <button {...props} ref={ref} />
));

API

<FileTrigger>
  <Button />
</FileTrigger>

FileTrigger

Name	Type
`acceptedFileTypes`	`ReadonlyArray<string>`
Specifies what mime type of files are allowed.
`allowsMultiple`	`boolean`
Whether multiple files can be selected.
`defaultCamera`	`'user' \| 'environment'`
Specifies the use of a media capture mechanism to capture the media on the spot.
`children`	`ReactNode`
The children of the component.
`acceptDirectory`	`boolean`
Enables the selection of directories instead of individual files.