feat!: Expose FileInput component ref with a clearFiles method

src/components/forms/FileInput/FileInput.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react'
 
-import { FileInput } from './FileInput'
+import { FileInput, FileInputRef } from './FileInput'
 import { FormGroup } from '../FormGroup/FormGroup'
 import { Label } from '../Label/Label'
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage'
@@ -113,15 +113,17 @@ export const disabled = (): React.ReactElement => (
   </FormGroup>
 )
 
-export const withCustomHandlers = (
+export const withRefAndCustomHandlers = (
   argTypes: StorybookArguments
 ): React.ReactElement => {
   const [files, setFiles] = useState<FileList>()
-  const fileInputRef = useRef<HTMLInputElement>()
+  const fileInputRef = useRef<FileInputRef>()
 
-  const handleChange = (e: React.ChangeEvent): void => {
+  const handleClearFiles = (): void => fileInputRef.current?.clearFiles()
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     argTypes.onChange(e)
-    setFiles(fileInputRef.current.files)
+    setFiles(e.target?.files)
   }
 
   const fileList = []
@@ -141,9 +143,14 @@ export const withCustomHandlers = (
           multiple
           onChange={handleChange}
           onDrop={argTypes.onDrop}
-          inputRef={fileInputRef}
+          ref={fileInputRef}
         />
       </FormGroup>
+
+      <button type="button" onClick={handleClearFiles}>
+        Clear files
+      </button>
+
       <p>{files?.length || 0} files added:</p>
       <ul>{fileList}</ul>
     </>

src/components/forms/FileInput/FileInput.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
-import { FileInput } from './FileInput'
+import { FileInput, FileInputRef } from './FileInput'
 import {
   TEST_TEXT_FILE,
   TEST_PNG_FILE,
@@ -330,4 +330,57 @@ describe('FileInput component', () => {
 
     expect(mockOnDrop).toHaveBeenCalled()
   })
+
+  describe('exposed ref', () => {
+    it('can be used to access the files', async () => {
+      const fileInputRef = React.createRef<FileInputRef>()
+
+      render(<FileInput {...testProps} ref={fileInputRef} />)
+
+      // Upload a file
+      const inputEl = screen.getByTestId('file-input-input')
+      userEvent.upload(inputEl, [TEST_PNG_FILE])
+
+      expect(fileInputRef.current?.input?.files).toHaveLength(1)
+      expect(fileInputRef.current?.files).toHaveLength(1)
+    })
+
+    it('can be used to clear the files', () => {
+      const fileInputRef = React.createRef<FileInputRef>()
+      const handleClearFiles = (): void => fileInputRef.current?.clearFiles()
+
+      render(
+        <>
+          <FileInput {...testProps} ref={fileInputRef} />
+          <button onClick={handleClearFiles}>Clear files</button>
+        </>
+      )
+
+      // Upload files
+      const inputEl = screen.getByTestId('file-input-input')
+      userEvent.upload(inputEl, [TEST_XLS_FILE])
+
+      const previews = screen.getAllByTestId('file-input-preview')
+      const previewHeading = screen.getByTestId('file-input-preview-heading')
+      expect(previews).toHaveLength(1)
+      expect(previews[0]).toHaveTextContent(TEST_XLS_FILE.name)
+      expect(previewHeading).toHaveTextContent('Selected file Change file')
+
+      expect(fileInputRef.current?.input?.files).toHaveLength(1)
+      expect(fileInputRef.current?.files).toHaveLength(1)
+
+      // Clear the input
+      fireEvent.click(screen.getByText('Clear files'))
+      expect(screen.queryByTestId('file-input-preview')).not.toBeInTheDocument()
+      expect(previewHeading).not.toBeInTheDocument()
+      expect(screen.getByTestId('file-input-instructions')).not.toHaveClass(
+        'display-none'
+      )
+
+      // Notice how input.files still exist because we can't programmatically set the value
+      expect(fileInputRef.current?.input?.files).toHaveLength(1)
+      // But the files state of the React "input" is cleared out
+      expect(fileInputRef.current?.files).toHaveLength(0)
+    })
+  })
 })