feat: adds removeFiles, onRemoveFiles

src/index.js

@@ -202,7 +202,14 @@ Dropzone.propTypes = {
    * @param {object[]} files
    * @param {(DragEvent|Event)} event
    */
-  onDropRejected: PropTypes.func
+  onDropRejected: PropTypes.func,
+
+  /**
+   * Cb for when a user removes one or more files.
+   *
+   * @param {object[]} files
+   */
+  onRemoveFiles: PropTypes.func
 }
 
 export default Dropzone
@@ -269,6 +276,7 @@ export default Dropzone
  * @property {File[]} draggedFiles Files in active drag
  * @property {File[]} acceptedFiles Accepted files
  * @property {File[]} rejectedFiles Rejected files
+ * @property {Function} removeFiles Accepts an array of File objects to be removed
  */
 
 const initialState = {
@@ -368,6 +376,7 @@ export function useDropzone({
   onDropAccepted,
   onDropRejected,
   onFileDialogCancel,
+  onRemoveFiles,
   preventDropOnDocument = true,
   noClick = false,
   noKeyboard = false,
@@ -710,6 +719,26 @@ export function useDropzone({
     [inputRef, accept, multiple, onDropCb, disabled]
   )
 
+  const removeFiles = React.useCallback(
+    files => {
+      const acceptedFiles = state.acceptedFiles.filter(acceptedFile => {
+        return !files.find(f => f === acceptedFile);
+      });
+      const rejectedFiles = state.rejectedFiles.filter(rejectedFile => {
+        return !files.find(f => f === rejectedFile);
+      });
+
+      dispatch({
+        acceptedFiles,
+        rejectedFiles,
+        type: 'setFiles'
+      })
+
+      onRemoveFiles && onRemoveFiles(files)
+    },
+    [state, onRemoveFiles]
+  )
+
   const fileCount = draggedFiles.length
   const isMultipleAllowed = multiple || fileCount <= 1
   const isDragAccept = fileCount > 0 && allFilesAccepted(draggedFiles, accept, minSize, maxSize)
@@ -724,7 +753,8 @@ export function useDropzone({
     getInputProps,
     rootRef,
     inputRef,
-    open: composeHandler(openFileDialog)
+    open: composeHandler(openFileDialog),
+    removeFiles
   }
 }
 

src/index.spec.js

@@ -1914,6 +1914,83 @@ describe('useDropzone() hook', () => {
       expect(onDropSpy).toHaveBeenCalledWith(files, [], expect.anything())
     })
 
+    test('removeFiles removes file from files arrays', async () => {
+      const FileList = (props = { files: [] }) => (
+        <ul>
+          {props.files.map(file => (
+            <li key={file.name} data-type={props.type}>
+              {file.name}
+            </li>
+          ))}
+        </ul>
+      )
+
+      const getAcceptedFiles = node => node.querySelectorAll(`[data-type="accepted"]`)
+      const getRejectedFiles = node => node.querySelectorAll(`[data-type="rejected"]`)
+
+      const ui = (
+        <Dropzone accept="image/*">
+          {({ getRootProps, getInputProps, acceptedFiles, rejectedFiles, removeFiles }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              <button onClick={() => {
+                removeFiles([acceptedFiles[0], rejectedFiles[0]]);
+              }}>Remove</button>
+              <FileList files={acceptedFiles} type="accepted" />
+              <FileList files={rejectedFiles} type="rejected" />
+            </div>
+          )}
+        </Dropzone>
+      )
+      const { container } = render(ui)
+      const dropzone = container.querySelector('div')
+      const input = container.querySelector('input')
+
+      Object.defineProperty(input, 'files', { value: [...files, ...images] })
+
+      dispatchEvt(input, 'change')
+      await flushPromises(ui, container)
+
+      const button = container.querySelector('button')
+      dispatchEvt(button, 'click')
+
+      await flushPromises(ui, container)
+
+      const acceptedFileList = getAcceptedFiles(dropzone)
+      expect(acceptedFileList).toHaveLength(1)
+      const rejectedFileList = getRejectedFiles(dropzone)
+      expect(rejectedFileList).toHaveLength(0)
+    })
+
+    test('onRemoveFiles callback is invoked when removeFiles is called', async () => {
+      const onRemoveSpy = jest.fn()
+
+      const ui = (
+        <Dropzone onRemoveFiles={onRemoveSpy}>
+          {({ getRootProps, getInputProps, acceptedFiles, removeFiles }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              <button onClick={() => {
+                removeFiles([acceptedFiles[0]]);
+              }}>Remove</button>
+            </div>
+          )}
+        </Dropzone>
+      )
+      const { container } = render(ui)
+      const input = container.querySelector('input')
+
+      Object.defineProperty(input, 'files', { value: files })
+
+      dispatchEvt(input, 'change')
+      await flushPromises(ui, container)
+
+      const button = container.querySelector('button')
+      dispatchEvt(button, 'click')
+
+      expect(onRemoveSpy).toHaveBeenCalledWith(files)
+    })
+
     it('sets {acceptedFiles, rejectedFiles}', async () => {
       const FileList = (props = { files: [] }) => (
         <ul>

typings/react-dropzone.d.ts

@@ -23,6 +23,7 @@ export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
   onDropRejected?<T extends File>(files: T[], event: DropEvent): void;
   getFilesFromEvent?(event: DropEvent): Promise<Array<File | DataTransferItem>>;
   onFileDialogCancel?(): void;
+  onRemoveFiles?(files: File[]): void;
 };
 
 export type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event;
@@ -40,6 +41,7 @@ export type DropzoneState = DropzoneRef & {
   inputRef: React.RefObject<HTMLInputElement>;
   getRootProps(props?: DropzoneRootProps): DropzoneRootProps;
   getInputProps(props?: DropzoneInputProps): DropzoneInputProps;
+  removeFiles(files: File[]): void;
 };
 
 export interface DropzoneRef {

typings/tests/all.tsx

@@ -14,6 +14,7 @@ export default class Test extends React.Component {
           onDropAccepted={(files, event) => console.log(files, event)}
           onDropRejected={(files, event) => console.log(files, event)}
           onFileDialogCancel={() => console.log("abc")}
+          onRemoveFiles={file => {}}
           minSize={2000}
           maxSize={Infinity}
           preventDropOnDocument