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([]);

  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>

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.