react-dropzone 11.5.2 → 11.7.1

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,251 @@ describe('useDropzone() hook', () => {
       jest.useRealTimers()
       isIeOrEdgeSpy.mockClear()
     })
+
+    it('should not use showOpenFilePicker() if supported and {useFsAccessApi} is not true', async () => {
+      jest.useFakeTimers()
+
+      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 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}
+          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)
+
+      dispatchEvt(document.body, 'focus')
+      drainTimers()
+
+      expect(onFileDialogOpenSpy).toHaveBeenCalled()
+
+      expect(activeRef.current).toBeNull()
+      expect(dropzone).not.toContainElement(activeRef.current)
+      expect(onClickSpy).toHaveBeenCalled()
+      expect(showOpenFilePickerMock).not.toHaveBeenCalled()
+      expect(onDropSpy).not.toHaveBeenCalled()
+
+      jest.useRealTimers()
+    })
+
+    it('should use showOpenFilePicker() if supported and {useFsAccessApi} is true, 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
+          useFsAccessApi
+        >
+          {({ 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 and {useFsAccessApi} is true, 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}
+          useFsAccessApi
+        >
+          {({ 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 {useFsAccessApi} is true, 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}
+          useFsAccessApi
+        >
+          {({ 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 and {useFsAccessApi} is true', 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
+          useFsAccessApi
+        >
+          {({ 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 +3062,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 +3141,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 +3154,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
+  }
+}

package/src/utils/index.js

@@ -26,14 +26,14 @@ export const getInvalidTypeRejectionErr = accept => {
 export const getTooLargeRejectionErr = maxSize => {
   return {
     code: FILE_TOO_LARGE,
-    message: `File is larger than ${maxSize} bytes`
+    message: `File is larger than ${maxSize} ${maxSize === 1 ? 'byte' : 'bytes'}`
   }
 }
 
 export const getTooSmallRejectionErr = minSize => {
   return {
     code: FILE_TOO_SMALL,
-    message: `File is smaller than ${minSize} bytes`
+    message: `File is smaller than ${minSize} ${minSize === 1 ? 'byte' : 'bytes'}`
   }
 }
 
@@ -66,8 +66,8 @@ function isDefined(value) {
   return value !== undefined && value !== null
 }
 
-export function allFilesAccepted({ files, accept, minSize, maxSize, multiple, maxFiles }) {
-  if ((!multiple && files.length > 1) || (multiple && maxFiles >= 1 &&  files.length > maxFiles) ) {
+export function allFilesAccepted({files, accept, minSize, maxSize, multiple, maxFiles}) {
+  if ((!multiple && files.length > 1) || (multiple && maxFiles >= 1 && files.length > maxFiles)) {
     return false;
   }
 
@@ -142,3 +142,37 @@ export function composeEventHandlers(...fns) {
       return isPropagationStopped(event)
     })
 }
+
+/**
+ * canUseFileSystemAccessAPI checks if the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
+ * is supported by the browser.
+ * @returns {boolean}
+ */
+export function canUseFileSystemAccessAPI() {
+  return 'showOpenFilePicker' in window;
+}
+
+/**
+ * filePickerOptionsTypes returns the {types} option for https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker
+ * based on the accept attr (see https://github.com/react-dropzone/attr-accept)
+ * E.g: converts ['image/*', 'text/*'] to {'image/*': [], 'text/*': []}
+ * @param {string|string[]} accept
+ */
+export function filePickerOptionsTypes(accept) {
+  accept = typeof accept === 'string' ? accept.split(',') : accept
+  return [{
+    description: 'everything',
+    // TODO: Need to handle filtering more elegantly than this!
+    accept: Array.isArray(accept)
+      // Accept just MIME types as per spec
+      // NOTE: accept can be https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers
+      ? accept.filter(item =>
+        item === 'audio/*' ||
+        item === 'video/*' ||
+        item === 'image/*' ||
+        item === 'text/*' ||
+        /\w+\/[-+.\w]+/g.test(item)
+      ).reduce((a, b) => ({...a, [b]: []}), {})
+      : {},
+  }];
+}

package/src/utils/index.spec.js

@@ -2,12 +2,10 @@ beforeEach(() => {
   jest.resetModules()
 })
 
-
 describe('fileMatchSize()', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should return true if the file object doesn\'t have a {size} property', () => {
@@ -42,9 +40,8 @@ describe('fileMatchSize()', () => {
 
 describe('isIeOrEdge', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should return true for IE10', () => {
@@ -89,9 +86,8 @@ describe('isPropagationStopped()', () => {
   const trueFn = jest.fn(() => true)
 
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should return result of isPropagationStopped() if isPropagationStopped exists', () => {
@@ -109,9 +105,8 @@ describe('isPropagationStopped()', () => {
 
 describe('isEvtWithFiles()', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should return true if some dragged types are files', () => {
@@ -145,9 +140,8 @@ describe('isEvtWithFiles()', () => {
 
 describe('composeEventHandlers', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('returns a fn', () => {
@@ -193,9 +187,8 @@ describe('composeEventHandlers', () => {
 
 describe('fileAccepted', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('accepts bogus firefox file', () => {
@@ -232,9 +225,8 @@ it('rejects file when single accept criteria as array', () => {
 
 describe('allFilesAccepted()', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
   it('rejects file when multiple accept criteria', () => {
     const files = [createFile('hamster.pdf', 100, 'application/pdf'),createFile('fish.pdf', 100, 'application/pdf')];
@@ -242,29 +234,18 @@ describe('allFilesAccepted()', () => {
     expect(utils.allFilesAccepted({ files, multiple: true})).toEqual(true)
     expect(utils.allFilesAccepted({ files, multiple: true, maxFiles: 10 })).toEqual(true)
     expect(utils.allFilesAccepted({ files, multiple: false, maxFiles: 10 })).toEqual(false)
-    expect(utils.allFilesAccepted({ files, multiple: true, accept:'image/jpeg' })).toEqual(false) 
-    expect(utils.allFilesAccepted({ files: images, multiple: true,accept:'image/*' })).toEqual(true) 
+    expect(utils.allFilesAccepted({ files, multiple: true, accept:'image/jpeg' })).toEqual(false)
+    expect(utils.allFilesAccepted({ files: images, multiple: true,accept:'image/*' })).toEqual(true)
     expect(utils.allFilesAccepted({ files, multiple: true, minSize: 110 })).toEqual(false)
     expect(utils.allFilesAccepted({ files, multiple: true, maxSize: 99 })).toEqual(false)
     expect(utils.allFilesAccepted({ files, multiple: true, maxFiles: 1 })).toEqual(false)
   })
 })
 
-function createFile(name, size, type) {
-  const file = new File([], name, { type })
-  Object.defineProperty(file, 'size', {
-    get() {
-      return size
-    }
-  })
-  return file
-}
-
 describe('ErrorCode', () => {
   let utils
-  beforeEach(async done => {
+  beforeEach(async () => {
     utils = await import('./index')
-    done()
   })
 
   it('should exist and have known error code properties', () => {
@@ -275,3 +256,85 @@ describe('ErrorCode', () => {
   })
 })
 
+describe('canUseFileSystemAccessAPI()', () => {
+  let utils
+  beforeEach(async () => {
+    utils = await import('./index')
+  })
+
+  it('should return false if not', () => {
+    expect(utils.canUseFileSystemAccessAPI()).toBe(false)
+  })
+
+  it('should return true if yes', () => {
+    // TODO: If we use these in other tests, restore once test is done
+    window.showOpenFilePicker = jest.fn()
+    expect(utils.canUseFileSystemAccessAPI()).toBe(true)
+  })
+})
+
+describe('filePickerOptionsTypes()', () => {
+  let utils
+  beforeEach(async () => {
+    utils = await import('./index')
+  })
+
+  it('should return proper types when the arg is a MIME type', () => {
+    expect(utils.filePickerOptionsTypes('application/zip')).toEqual([{
+      description: 'everything',
+      accept: {'application/zip': []}
+    }])
+  })
+
+  it('should return proper types when the arg is an array of MIME types', () => {
+    expect(utils.filePickerOptionsTypes(['application/zip', 'application/json'])).toEqual([{
+      description: 'everything',
+      accept: {
+        'application/zip': [],
+        'application/json': []
+      }
+    }])
+  })
+
+  it("should exclude anything that's not a MIME type", () => {
+    expect(utils.filePickerOptionsTypes(['audio/*', 'video/*', 'image/*', '.txt', 'text/*'])).toEqual([{
+      description: 'everything',
+      accept: {
+        'audio/*': [],
+        'video/*': [],
+        'image/*': [],
+        'text/*': [],
+      }
+    }])
+  })
+
+  it("should work with comma separated string of MIME types", () => {
+    expect(utils.filePickerOptionsTypes('audio/*,video/*,image/*,.txt,text/*,application/zip')).toEqual([{
+      description: 'everything',
+      accept: {
+        'audio/*': [],
+        'video/*': [],
+        'image/*': [],
+        'text/*': [],
+        'application/zip': []
+      }
+    }])
+  })
+
+  it('should return empty otherwise', () => {
+    expect(utils.filePickerOptionsTypes('')).toEqual([{
+      description: 'everything',
+      accept: {}
+    }])
+  })
+})
+
+function createFile(name, size, type) {
+  const file = new File([], name, { type })
+  Object.defineProperty(file, 'size', {
+    get() {
+      return size
+    }
+  })
+  return file
+}

package/styleguide.config.js

@@ -73,6 +73,10 @@ module.exports = {
           name: 'Class Components',
           content: 'examples/class-component/README.md'
         },
+        {
+          name: 'No JSX',
+          content: 'examples/no-jsx/README.md'
+        },
         {
           name: 'Extending Dropzone',
           content: 'examples/plugins/README.md'

package/typings/.eslintrc

@@ -0,0 +1,28 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "plugins": [
+    "import",
+    "prettier",
+    "react",
+    "react-hooks",
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}