# 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. ```tsx import {FileTrigger} from 'react-aria-components'; import {Button} from 'vanilla-starter/Button'; import {useState} from 'react'; function Example(props) { let [files, setFiles] = useState([]); return ( <> {/*- begin focus -*/} { let files = e ? Array.from(e) : []; let filenames = files.map((file) => file.name); setFiles(filenames); }}> {/*- end focus -*/} {files.join(', ')} ); } ``` ## Custom trigger `FileTrigger` works with any pressable React Aria component (e.g. [Button](Button.md), [Link](Link.md), etc.). Use the `` component or [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html) hook to wrap a custom trigger element such as a third party component or DOM element. ```tsx "use client" import {Pressable, FileTrigger} from 'react-aria-components'; {/*- begin highlight -*/} Custom trigger {/*- end highlight -*/} ``` Accessibility Any `` child must have an [interactive ARIA role](https://www.w3.org/TR/wai-aria-1.2/#widget_roles) 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. ```tsx const CustomTrigger = React.forwardRef((props, ref) => (