Add directory support for FileTrigger (#5444)

* Add directory support for FileTrigger

* docs: Added description of UNSAFE_directory prop

* refac: Remove unsafe prefix

* Add story

* Update FileTrigger.mdx

Updated section title to match formatting of others

---------

Co-authored-by: Yihui Liao <[email protected]>
Co-authored-by: Rob Snow <[email protected]>
Co-authored-by: Reid Barber <[email protected]>

Author: 4 people

packages/react-aria-components/docs/FileTrigger.mdx

@@ -120,6 +120,18 @@ A file trigger can accept multiple files by passsing the `allowsMultiple` proper
 </FileTrigger>
 ```
 
+## Directory selection
+
+To enable selecting directories instead of files, use the `directory` property. 
+
+This reflects the [webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory) HTML attribute and allows users to select directories and their contents.
+
+```tsx example
+<FileTrigger directory>
+  <Button>Select a directory</Button>
+</FileTrigger>
+```
+
 ## Media capture
 
 To specify the media capture mechanism to capture media on the spot, pass `user` for the user-facing camera or `environment` for the outward-facing camera via the `defaultCamera` prop.

packages/react-aria-components/src/FileTrigger.tsx

@@ -35,17 +35,21 @@ export interface FileTriggerProps {
   /**
    * The children of the component.
    */
-  children?: ReactNode
+  children?: ReactNode,
+  /**
+   * Enables the selection of directories instead of individual files.
+   */
+  directory?: boolean
 }
 
 function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
-  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, ...rest} = props;
+  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, directory, ...rest} = props;
   let inputRef = useObjectRef(ref);
   let domProps = filterDOMProps(rest);
 
   return (
     <>
-      <PressResponder 
+      <PressResponder
         onPress={() => {
           if (inputRef.current.value) {
             inputRef.current.value = '';
@@ -62,7 +66,9 @@ function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement
         accept={acceptedFileTypes?.toString()}
         onChange={(e) => onSelect?.(e.target.files)}
         capture={defaultCamera}
-        multiple={allowsMultiple} />
+        multiple={allowsMultiple}
+        // @ts-expect-error
+        webkitdirectory={directory ? '' : undefined} />
     </>
   );
 }

packages/react-aria-components/stories/index.stories.tsx

@@ -1166,6 +1166,16 @@ export const FileTriggerButton = (props) => (
   </FileTrigger>
 );
 
+export const FileTriggerDirectories = (props) => (
+  <FileTrigger
+    directory
+    onSelect={action('onSelect')}
+    data-testid="filetrigger-example"
+    {...props} >
+    <Button>Upload</Button>
+  </FileTrigger>
+);
+
 export const FileTriggerLinkAllowsMultiple = (props) => (
   <FileTrigger
     {...props}

packages/react-aria-components/test/FileTrigger.test.js

@@ -88,4 +88,16 @@ describe('FileTrigger', () => {
     let input = getByTestId('foo');
     expect(ref.current).toBe(input);
   });
+
+  it('should allow directory uploads when directory is true', () => {
+    render(
+      <FileTrigger directory>
+        <Button>Upload Directory</Button>
+      </FileTrigger>
+    );
+  
+    let input = document.querySelector('input[type="file"]');
+    expect(input).toHaveAttribute('webkitdirectory');
+  });
+  
 });