Allow FileTrigger to accept the same file twice (#5045)

* Allow FileTrigger to accept the same file twice

* remove name prop

* update stories from onChange to onSelect

* remove name from test

* update to onSelect in docs

* move filetrigger to buttons category in docs

Author: yihuiliao

packages/@react-spectrum/dropzone/stories/DropZone.stories.tsx

@@ -125,7 +125,7 @@ function Example(props) {
           <Content>
             <FileTrigger
               allowsMultiple
-              onChange={(e) => {
+              onSelect={(e) => {
                 let files = Array.from(e);
                 let rows = files.map((file, index) => ({name: file.name, type: file.type, id: index}));
                 setFilledSrc(rows);
@@ -232,7 +232,7 @@ function DropZoneWithButton(props) {
           </Heading>
           <Content>
             <FileTrigger
-              onChange={(e) => {
+              onSelect={(e) => {
                 let files = Array.from(e);
                 let src = files.map(file => URL.createObjectURL(file));
                 let type = files.map(file => file.type);

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

@@ -261,7 +261,7 @@ function Example() {
   return(
     <DropZone>
       <FileTrigger
-        onChange={(e) => {
+        onSelect={(e) => {
           let files = Array.from(e);
           let urls = files.map((file) => file.name);
           setFile(urls);

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

@@ -24,7 +24,7 @@ import Button from '@react-spectrum/docs/pages/assets/component-illustrations/Ac
 import Link from '@react-spectrum/docs/pages/assets/component-illustrations/Link.svg';
 
 ---
-category: Forms
+category: Buttons
 keywords: [filetrigger, input, aria]
 type: component
 ---
@@ -48,7 +48,7 @@ function Example(){
   return (
     <>
       <FileTrigger
-        onChange={(e) => {
+        onSelect={(e) => {
           let files = Array.from(e);
           let urls = files.map((file) => file.name);
           setFile(urls);

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

@@ -31,25 +31,27 @@ export interface FileTriggerProps {
   /**
    * Handler when a user selects a file.
    */
-  onChange?: (files: FileList | null) => void,
-  /**
-   * The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
-   */
-  name?: string,
+  onSelect?: (files: FileList | null) => void,
   /**
    * The children of the component.
    */
   children?: ReactNode
 }
 
 function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
-  let {onChange, acceptedFileTypes, allowsMultiple, defaultCamera, name, children, ...rest} = props;
+  let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, ...rest} = props;
   let inputRef = useObjectRef(ref);
   let domProps = filterDOMProps(rest);
 
   return (
     <>
-      <PressResponder onPress={() => inputRef.current?.click()}>
+      <PressResponder 
+        onPress={() => {
+          if (inputRef.current.value) {
+            inputRef.current.value = '';
+          }
+          inputRef.current?.click();
+        }}>
         {children}
       </PressResponder>
       <Input
@@ -58,10 +60,9 @@ function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement
         ref={inputRef}
         style={{display: 'none'}}
         accept={acceptedFileTypes?.toString()}
-        onChange={(e) => onChange?.(e.target.files)}
+        onChange={(e) => onSelect?.(e.target.files)}
         capture={defaultCamera}
-        multiple={allowsMultiple}
-        name={name} />
+        multiple={allowsMultiple} />
     </>
   );
 }

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

@@ -830,7 +830,7 @@ export const DropzoneExampleWithFileTriggerLink = (props) => (
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')}>
-      <FileTrigger onChange={action('onChange')}>
+      <FileTrigger onSelect={action('onSelect')}>
         <Link>Upload</Link>
       </FileTrigger>
     </DropZone>
@@ -845,7 +845,7 @@ export const DropzoneExampleWithFileTriggerButton = (props) => (
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')}>
-      <FileTrigger onChange={action('onChange')} >
+      <FileTrigger onSelect={action('onSelect')} >
         <Button>Upload</Button>
       </FileTrigger>
     </DropZone>
@@ -861,7 +861,7 @@ export const DropzoneExampleWithDraggableAndFileTrigger = (props) => (
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')}>
-      <FileTrigger onChange={action('onChange')} >
+      <FileTrigger onSelect={action('onSelect')} >
         <Button>Browse</Button>
       </FileTrigger>
       Or drag into here
@@ -879,7 +879,7 @@ export const DropZoneOnlyAcceptPNGWithFileTrigger = (props) => (
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')} >
-      <FileTrigger onChange={action('onChange')} acceptedFileTypes={['image/png']}>
+      <FileTrigger onSelect={action('onSelect')} acceptedFileTypes={['image/png']}>
         <Button>Upload</Button>
       </FileTrigger>
     </DropZone>
@@ -896,7 +896,7 @@ export const DropZoneWithCaptureMobileOnly = (props) => (
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')} >
-      <FileTrigger onChange={action('onChange')} defaultCamera="environment">
+      <FileTrigger onSelect={action('onSelect')} defaultCamera="environment">
         <Button>Upload</Button>
       </FileTrigger>
     </DropZone>
@@ -963,16 +963,16 @@ export const DropzoneWithRenderProps = (props) => (
 
 export const FileTriggerButton = (props) => (
   <FileTrigger
-    {...props}
-    onChange={action('OnChange')} >
+    onSelect={action('onSelect')}
+    {...props} >
     <Button>Upload</Button>
   </FileTrigger>
 );
 
 export const FileTriggerLinkAllowsMultiple = (props) => (
   <FileTrigger
     {...props}
-    onChange={action('OnChange')}
+    onSelect={action('onSelect')}
     allowsMultiple >
     <Link>Select a file</Link>
   </FileTrigger>

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

@@ -80,13 +80,12 @@ describe('FileTrigger', () => {
   it('should attach a ref to the input', () => {
     let ref = React.createRef();
     let {getByTestId} = render(
-      <FileTrigger ref={ref} data-testid="foo" name="foibles">
+      <FileTrigger ref={ref} data-testid="foo">
         <Button>Upload</Button>
       </FileTrigger>
     );
 
     let input = getByTestId('foo');
     expect(ref.current).toBe(input);
-    expect(input).toHaveAttribute('name', 'foibles');
   });
 });