react-dropzone 11.5.1 → 11.7.0

package/src/index.js

@@ -10,12 +10,14 @@ import React, {
   useRef
 } from 'react'
 import PropTypes from 'prop-types'
-import { fromEvent } from 'file-selector'
+import {fromEvent} from 'file-selector'
 import {
   allFilesAccepted,
   composeEventHandlers,
   fileAccepted,
   fileMatchSize,
+  filePickerOptionsTypes,
+  canUseFileSystemAccessAPI,
   isEvtWithFiles,
   isIeOrEdge,
   isPropagationStopped,
@@ -37,13 +39,13 @@ import {
  * </Dropzone>
  * ```
  */
-const Dropzone = forwardRef(({ children, ...params }, ref) => {
-  const { open, ...props } = useDropzone(params)
+const Dropzone = forwardRef(({children, ...params}, ref) => {
+  const {open, ...props} = useDropzone(params)
 
-  useImperativeHandle(ref, () => ({ open }), [open])
+  useImperativeHandle(ref, () => ({open}), [open])
 
   // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
-  return <Fragment>{children({ ...props, open })}</Fragment>
+  return <Fragment>{children({...props, open})}</Fragment>
 })
 
 Dropzone.displayName = 'Dropzone'
@@ -158,9 +160,9 @@ Dropzone.propTypes = {
    */
   onFileDialogCancel: PropTypes.func,
 
-    /**
-     * Cb for when opening the file dialog
-     */
+  /**
+   * Cb for when opening the file dialog
+   */
   onFileDialogOpen: PropTypes.func,
 
   /**
@@ -420,23 +422,18 @@ export function useDropzone(options = {}) {
     ...options
   }
 
+  const onFileDialogOpenCb = useMemo(
+    () => typeof onFileDialogOpen === 'function' ? onFileDialogOpen : noop,
+    [onFileDialogOpen])
+  const onFileDialogCancelCb = useMemo(
+    () => typeof onFileDialogCancel === 'function' ? onFileDialogCancel : noop,
+    [onFileDialogCancel])
+
   const rootRef = useRef(null)
   const inputRef = useRef(null)
 
   const [state, dispatch] = useReducer(reducer, initialState)
-  const { isFocused, isFileDialogActive, draggedFiles } = state
-
-  // Fn for opening the file dialog programmatically
-  const openFileDialog = useCallback(() => {
-    if (inputRef.current) {
-      dispatch({ type: 'openDialog' })
-      if (typeof onFileDialogOpen === 'function') {
-        onFileDialogOpen()
-      }
-      inputRef.current.value = null
-      inputRef.current.click()
-    }
-  }, [dispatch, onFileDialogOpen])
+  const {isFocused, isFileDialogActive, draggedFiles} = state
 
   // Update file dialog active state when the window is focused on
   const onWindowFocus = () => {
@@ -444,65 +441,26 @@ export function useDropzone(options = {}) {
     if (isFileDialogActive) {
       setTimeout(() => {
         if (inputRef.current) {
-          const { files } = inputRef.current
+          const {files} = inputRef.current
 
           if (!files.length) {
-            dispatch({ type: 'closeDialog' })
-
-            if (typeof onFileDialogCancel === 'function') {
-              onFileDialogCancel()
-            }
+            dispatch({type: 'closeDialog'})
+            onFileDialogCancelCb()
           }
         }
       }, 300)
     }
   }
   useEffect(() => {
+    if (canUseFileSystemAccessAPI()) {
+      return () => {}
+    }
+
     window.addEventListener('focus', onWindowFocus, false)
     return () => {
       window.removeEventListener('focus', onWindowFocus, false)
     }
-  }, [inputRef, isFileDialogActive, onFileDialogCancel])
-
-  // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
-  const onKeyDownCb = useCallback(
-    event => {
-      // Ignore keyboard events bubbling up the DOM tree
-      if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
-        return
-      }
-
-      if (event.keyCode === 32 || event.keyCode === 13) {
-        event.preventDefault()
-        openFileDialog()
-      }
-    },
-    [rootRef, inputRef, openFileDialog]
-  )
-
-  // Update focus state for the dropzone
-  const onFocusCb = useCallback(() => {
-    dispatch({ type: 'focus' })
-  }, [])
-  const onBlurCb = useCallback(() => {
-    dispatch({ type: 'blur' })
-  }, [])
-
-  // Cb to open the file dialog when click occurs on the dropzone
-  const onClickCb = useCallback(() => {
-    if (noClick) {
-      return
-    }
-
-    // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
-    // to ensure React can handle state changes
-    // See: https://github.com/react-dropzone/react-dropzone/issues/450
-    if (isIeOrEdge()) {
-      setTimeout(openFileDialog, 0)
-    } else {
-      openFileDialog()
-    }
-  }, [inputRef, noClick, openFileDialog])
+  }, [inputRef, isFileDialogActive, onFileDialogCancelCb])
 
   const dragTargetsRef = useRef([])
   const onDocumentDrop = event => {
@@ -614,6 +572,66 @@ export function useDropzone(options = {}) {
     [rootRef, onDragLeave, noDragEventsBubbling]
   )
 
+  const setFiles = useCallback((files, event) => {
+    const acceptedFiles = []
+    const fileRejections = []
+
+    files.forEach(file => {
+      const [accepted, acceptError] = fileAccepted(file, accept)
+      const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize)
+      const customErrors = validator ? validator(file) : null;
+
+      if (accepted && sizeMatch && !customErrors) {
+        acceptedFiles.push(file)
+      } else {
+        let errors = [acceptError, sizeError];
+
+        if (customErrors) {
+          errors = errors.concat(customErrors);
+        }
+
+        fileRejections.push({file, errors: errors.filter(e => e)})
+      }
+    })
+
+    if ((!multiple && acceptedFiles.length > 1) || (multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles)) {
+      // Reject everything and empty accepted files
+      acceptedFiles.forEach(file => {
+        fileRejections.push({file, errors: [TOO_MANY_FILES_REJECTION]})
+      })
+      acceptedFiles.splice(0)
+    }
+
+    dispatch({
+      acceptedFiles,
+      fileRejections,
+      type: 'setFiles'
+    })
+
+    if (onDrop) {
+      onDrop(acceptedFiles, fileRejections, event)
+    }
+
+    if (fileRejections.length > 0 && onDropRejected) {
+      onDropRejected(fileRejections, event)
+    }
+
+    if (acceptedFiles.length > 0 && onDropAccepted) {
+      onDropAccepted(acceptedFiles, event)
+    }
+  }, [
+    dispatch,
+    multiple,
+    accept,
+    minSize,
+    maxSize,
+    maxFiles,
+    onDrop,
+    onDropAccepted,
+    onDropRejected,
+    validator
+  ]);
+
   const onDropCb = useCallback(
     event => {
       event.preventDefault()
@@ -628,72 +646,91 @@ export function useDropzone(options = {}) {
           if (isPropagationStopped(event) && !noDragEventsBubbling) {
             return
           }
-
-          const acceptedFiles = []
-          const fileRejections = []
-
-          files.forEach(file => {
-            const [accepted, acceptError] = fileAccepted(file, accept)
-            const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize)
-            const customErrors = validator ? validator(file) : null;
-
-            if (accepted && sizeMatch && !customErrors) {
-              acceptedFiles.push(file)
-            } else {
-              let errors = [acceptError, sizeError];
-
-              if (customErrors) {
-                errors = errors.concat(customErrors);
-              }
-
-              fileRejections.push({ file, errors: errors.filter(e => e) })
-            }
-          })
-
-          if ((!multiple && acceptedFiles.length > 1) || (multiple && maxFiles >= 1 &&  acceptedFiles.length > maxFiles)) {
-            // Reject everything and empty accepted files
-            acceptedFiles.forEach(file => {
-              fileRejections.push({ file, errors: [TOO_MANY_FILES_REJECTION] })
-            })
-            acceptedFiles.splice(0)
-          }
-
-          dispatch({
-            acceptedFiles,
-            fileRejections,
-            type: 'setFiles'
-          })
-
-          if (onDrop) {
-            onDrop(acceptedFiles, fileRejections, event)
-          }
-
-          if (fileRejections.length > 0 && onDropRejected) {
-            onDropRejected(fileRejections, event)
-          }
-
-          if (acceptedFiles.length > 0 && onDropAccepted) {
-            onDropAccepted(acceptedFiles, event)
-          }
+          setFiles(files, event)
         })
       }
-      dispatch({ type: 'reset' })
+      dispatch({type: 'reset'})
     },
     [
-      multiple,
-      accept,
-      minSize,
-      maxSize,
-      maxFiles,
       getFilesFromEvent,
-      onDrop,
-      onDropAccepted,
-      onDropRejected,
-      noDragEventsBubbling,
-      validator
+      setFiles,
+      noDragEventsBubbling
     ]
   )
 
+  // Fn for opening the file dialog programmatically
+  const openFileDialog = useCallback(() => {
+    if (canUseFileSystemAccessAPI()) {
+      dispatch({type: 'openDialog'})
+      onFileDialogOpenCb()
+      // https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+      const opts = {
+        multiple,
+        types: filePickerOptionsTypes(accept)
+      };
+      window.showOpenFilePicker(opts)
+        .then(handles => getFilesFromEvent(handles))
+        .then(files => setFiles(files, null))
+        .catch(e => onFileDialogCancelCb(e))
+        .finally(() => dispatch({type: 'closeDialog'}));
+      return
+    }
+
+    if (inputRef.current) {
+      dispatch({type: 'openDialog'})
+      onFileDialogOpenCb()
+      inputRef.current.value = null
+      inputRef.current.click()
+    }
+  }, [
+    dispatch,
+    onFileDialogOpenCb,
+    onFileDialogCancelCb,
+    setFiles,
+    accept,
+    multiple
+  ])
+
+  // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
+  const onKeyDownCb = useCallback(
+    event => {
+      // Ignore keyboard events bubbling up the DOM tree
+      if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {
+        return
+      }
+
+      if (event.keyCode === 32 || event.keyCode === 13) {
+        event.preventDefault()
+        openFileDialog()
+      }
+    },
+    [rootRef, inputRef, openFileDialog]
+  )
+
+  // Update focus state for the dropzone
+  const onFocusCb = useCallback(() => {
+    dispatch({type: 'focus'})
+  }, [])
+  const onBlurCb = useCallback(() => {
+    dispatch({type: 'blur'})
+  }, [])
+
+  // Cb to open the file dialog when click occurs on the dropzone
+  const onClickCb = useCallback(() => {
+    if (noClick) {
+      return
+    }
+
+    // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
+    // to ensure React can handle state changes
+    // See: https://github.com/react-dropzone/react-dropzone/issues/450
+    if (isIeOrEdge()) {
+      setTimeout(openFileDialog, 0)
+    } else {
+      openFileDialog()
+    }
+  }, [inputRef, noClick, openFileDialog])
+
   const composeHandler = fn => {
     return disabled ? null : fn
   }
@@ -715,6 +752,7 @@ export function useDropzone(options = {}) {
   const getRootProps = useMemo(
     () => ({
       refKey = 'ref',
+      role,
       onKeyDown,
       onFocus,
       onBlur,
@@ -733,8 +771,9 @@ export function useDropzone(options = {}) {
       onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),
       onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),
       onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),
+      role: typeof role === 'string' && role !== '' ? role : 'button',
       [refKey]: rootRef,
-      ...(!disabled && !noKeyboard ? { tabIndex: 0 } : {}),
+      ...(!disabled && !noKeyboard ? {tabIndex: 0} : {}),
       ...rest
     }),
     [
@@ -758,12 +797,12 @@ export function useDropzone(options = {}) {
   }, [])
 
   const getInputProps = useMemo(
-    () => ({ refKey = 'ref', onChange, onClick, ...rest } = {}) => {
+    () => ({refKey = 'ref', onChange, onClick, ...rest} = {}) => {
       const inputProps = {
         accept,
         multiple,
         type: 'file',
-        style: { display: 'none' },
+        style: {display: 'none'},
         onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),
         onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),
         autoComplete: 'off',
@@ -780,7 +819,7 @@ export function useDropzone(options = {}) {
   )
 
   const fileCount = draggedFiles.length
-  const isDragAccept = fileCount > 0 && allFilesAccepted({ files: draggedFiles, accept, minSize, maxSize, multiple, maxFiles })
+  const isDragAccept = fileCount > 0 && allFilesAccepted({files: draggedFiles, accept, minSize, maxSize, multiple, maxFiles})
   const isDragReject = fileCount > 0 && !isDragAccept
 
   return {
@@ -811,7 +850,7 @@ function reducer(state, action) {
       }
     case 'openDialog':
       return {
-        ...state,
+        ...initialState,
         isFileDialogActive: true
       }
     case 'closeDialog':
@@ -821,7 +860,7 @@ function reducer(state, action) {
       }
     case 'setDraggedFiles':
       /* eslint no-case-declarations: 0 */
-      const { isDragActive, draggedFiles } = action
+      const {isDragActive, draggedFiles} = action
       return {
         ...state,
         draggedFiles,
@@ -842,4 +881,6 @@ function reducer(state, action) {
   }
 }
 
-export { ErrorCode } from './utils'
+function noop() {}
+
+export {ErrorCode} from './utils'

package/src/index.spec.js

@@ -1159,6 +1159,20 @@ describe('useDropzone() hook', () => {
   })
 
   describe('onClick', () => {
+    let currentShowOpenFilePicker;
+
+    beforeEach(() => {
+      currentShowOpenFilePicker = window.showOpenFilePicker
+    })
+
+    afterEach(() => {
+      if (currentShowOpenFilePicker) {
+        window.showOpenFilePicker = currentShowOpenFilePicker
+      } else {
+        delete window.showOpenFilePicker
+      }
+    })
+
     it('should proxy the click event to the input', () => {
       const activeRef = createRef()
       const active = <span ref={activeRef}>I am active</span>
@@ -1303,6 +1317,185 @@ describe('useDropzone() hook', () => {
       jest.useRealTimers()
       isIeOrEdgeSpy.mockClear()
     })
+
+    it('should use showOpenFilePicker() if supported and not trigger click on input', async () => {
+      const activeRef = createRef()
+      const active = <span ref={activeRef}>I am active</span>
+      const onClickSpy = jest.spyOn(HTMLInputElement.prototype, 'click')
+
+      const handlers = files.map(f => createFileSystemFileHandle(f))
+      const thenable = createThenable()
+      const showOpenFilePickerMock = jest.fn().mockReturnValue(thenable.promise)
+
+      window.showOpenFilePicker = showOpenFilePickerMock
+
+      const onDropSpy = jest.fn()
+      const onFileDialogOpenSpy = jest.fn()
+
+      const ui = (
+        <Dropzone
+          onDrop={onDropSpy}
+          onFileDialogOpen={onFileDialogOpenSpy}
+          accept="application/pdf"
+          multiple
+        >
+          {({ getRootProps, getInputProps, isFileDialogActive }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isFileDialogActive && active}
+            </div>
+          )}
+        </Dropzone>
+      )
+
+      const { container, rerender } = render(ui)
+
+      const dropzone = container.querySelector('div')
+
+      fireEvent.click(dropzone)
+
+      await flushPromises(rerender, ui)
+
+      expect(activeRef.current).not.toBeNull()
+      expect(dropzone).toContainElement(activeRef.current)
+      expect(onFileDialogOpenSpy).toHaveBeenCalled()
+
+      thenable.done(handlers)
+      await flushPromises(rerender, ui)
+
+      expect(activeRef.current).toBeNull() // We expect the dialog to be closed at this point
+      expect(dropzone).not.toContainElement(activeRef.current)
+      expect(onClickSpy).not.toHaveBeenCalled()
+      expect(showOpenFilePickerMock).toHaveBeenCalledWith({
+        multiple: true,
+        types: [{
+          description: 'everything',
+          accept: {'application/pdf': []}
+        }]
+      })
+      expect(onDropSpy).toHaveBeenCalledWith(files, [], null)
+    })
+
+    test('if showOpenFilePicker() is supported it should work without the <input>', async () => {
+      const activeRef = createRef()
+      const active = <span ref={activeRef}>I am active</span>
+
+      const handlers = files.map(f => createFileSystemFileHandle(f))
+      const showOpenFilePickerMock = jest.fn().mockReturnValue(Promise.resolve(handlers))
+
+      window.showOpenFilePicker = showOpenFilePickerMock
+
+      const onDropSpy = jest.fn()
+      const onFileDialogOpenSpy = jest.fn()
+
+      const ui = (
+        <Dropzone onDrop={onDropSpy} onFileDialogOpen={onFileDialogOpenSpy}>
+          {({ getRootProps, isFileDialogActive }) => (
+            <div {...getRootProps()}>
+              {isFileDialogActive && active}
+            </div>
+          )}
+        </Dropzone>
+      )
+
+      const { container, rerender } = render(ui)
+
+      const dropzone = container.querySelector('div')
+
+      fireEvent.click(dropzone)
+      await flushPromises(rerender, ui)
+      const ref = activeRef.current
+      expect(ref).toBeNull() // We expect the dialog to be closed at this point
+      expect(dropzone).not.toContainElement(ref)
+      expect(showOpenFilePickerMock).toHaveBeenCalled()
+      expect(onDropSpy).toHaveBeenCalledWith(files, [], null)
+      expect(onFileDialogOpenSpy).toHaveBeenCalled()
+    })
+
+    test('if showOpenFilePicker() is supported and the user cancels it should call onFileDialogCancel', async () => {
+      const activeRef = createRef()
+      const active = <span ref={activeRef}>I am active</span>
+
+      const showOpenFilePickerMock = jest.fn().mockReturnValue(Promise.reject(new DOMException("user aborted request", "AbortError")))
+
+      window.showOpenFilePicker = showOpenFilePickerMock
+
+      const onDropSpy = jest.fn()
+      const onFileDialogCancelSpy = jest.fn()
+
+      const ui = (
+        <Dropzone onDrop={onDropSpy} onFileDialogCancel={onFileDialogCancelSpy}>
+          {({ getRootProps, isFileDialogActive }) => (
+            <div {...getRootProps()}>
+              {isFileDialogActive && active}
+            </div>
+          )}
+        </Dropzone>
+      )
+
+      const { container, rerender } = render(ui)
+
+      const dropzone = container.querySelector('div')
+
+      fireEvent.click(dropzone)
+      await flushPromises(rerender, ui)
+      const ref = activeRef.current
+      expect(ref).toBeNull() // We expect the dialog to be closed at this point
+      expect(dropzone).not.toContainElement(ref)
+      expect(showOpenFilePickerMock).toHaveBeenCalled()
+      expect(onDropSpy).not.toHaveBeenCalled()
+      expect(onFileDialogCancelSpy).toHaveBeenCalled()
+    })
+
+    test('window focus evt is not bound if showOpenFilePicker() is supported', async () => {
+      jest.useFakeTimers()
+
+      const activeRef = createRef()
+      const active = <span ref={activeRef}>I am active</span>
+      const onFileDialogCancelSpy = jest.fn()
+
+      const thenable = createThenable()
+      const showOpenFilePickerMock = jest.fn().mockReturnValue(thenable.promise)
+
+      window.showOpenFilePicker = showOpenFilePickerMock
+
+      const ui = (
+        <Dropzone onFileDialogCancel={onFileDialogCancelSpy} noClick>
+          {({ getRootProps, isFileDialogActive, open }) => (
+            <div {...getRootProps()}>
+              {isFileDialogActive && active}
+              <button type="button" onClick={open}>
+                Open
+              </button>
+            </div>
+          )}
+        </Dropzone>
+      )
+
+      const { container, rerender } = render(ui)
+
+      const dropzone = container.querySelector('div')
+      const btn = container.querySelector('button')
+
+      btn.click()
+      drainTimers()
+      await flushPromises(rerender, ui)
+
+      const ref = activeRef.current
+      expect(ref).not.toBeNull()
+      expect(dropzone).toContainElement(ref)
+
+      thenable.cancel(new DOMException('user aborted request', 'AbortError'))
+
+      dispatchEvt(document.body, 'focus')
+      drainTimers()
+      await flushPromises(rerender, ui)
+
+      expect(onFileDialogCancelSpy).toHaveBeenCalledTimes(1)
+      expect(dropzone).not.toContainElement(ref)
+
+      jest.useRealTimers()
+    })
   })
 
   describe('onKeyDown', () => {
@@ -2803,6 +2996,34 @@ describe('useDropzone() hook', () => {
       ], expect.anything())
     })
   })
+
+  describe('accessibility', () => {
+    it('sets the role attribute to button by default on the root', () => {
+      const { container } = render(
+        <Dropzone>
+          {({ getRootProps }) => (
+            <div id="root" {...getRootProps()} />
+          )}
+        </Dropzone>
+      )
+      const root = container.querySelector('#root')
+
+      expect(root).toHaveAttribute('role', 'button')
+    })
+
+    test('users can override the default role attribute on the root', () => {
+      const { container } = render(
+        <Dropzone>
+          {({ getRootProps }) => (
+            <div id="root" {...getRootProps({role: 'generic'})} />
+          )}
+        </Dropzone>
+      )
+      const root = container.querySelector('#root')
+
+      expect(root).toHaveAttribute('role', 'generic')
+    })
+  })
 })
 
 async function flushPromises(rerender, ui) {
@@ -2854,6 +3075,10 @@ function dispatchEvt(node, type, data) {
   fireEvent(node, event)
 }
 
+function createFileSystemFileHandle(file) {
+  return {getFile: () => Promise.resolve(file)}
+}
+
 function createFile(name, size, type) {
   const file = new File([], name, { type })
   Object.defineProperty(file, 'size', {
@@ -2863,3 +3088,18 @@ function createFile(name, size, type) {
   })
   return file
 }
+
+function createThenable() {
+  let done, cancel;
+
+  const promise = new Promise((resolve, reject) => {
+    done = resolve
+    cancel = reject
+  })
+
+  return {
+    promise,
+    done,
+    cancel
+  }
+}