react-dropzone 4.0.0 → 4.1.2

package/src/index.js

@@ -2,39 +2,35 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
-import accepts from 'attr-accept'
-import getDataTransferItems from './getDataTransferItems'
-
-const supportMultiple = typeof document !== 'undefined' && document && document.createElement
-  ? 'multiple' in document.createElement('input')
-  : true
-
-function fileAccepted(file, accept) {
-  // Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
-  // that MIME type will always be accepted
-  return file.type === 'application/x-moz-file' || accepts(file, accept)
-}
+import {
+  supportMultiple,
+  fileAccepted,
+  allFilesAccepted,
+  fileMatchSize,
+  onDocumentDragOver,
+  getDataTransferItems
+} from './utils'
+import styles from './utils/styles'
 
 class Dropzone extends React.Component {
-  static onDocumentDragOver(evt) {
-    // allow the entire document to be a drag target
-    evt.preventDefault()
-  }
-
   constructor(props, context) {
     super(props, context)
+    this.composeHandlers = this.composeHandlers.bind(this)
     this.onClick = this.onClick.bind(this)
     this.onDocumentDrop = this.onDocumentDrop.bind(this)
-    this.onDragStart = this.onDragStart.bind(this)
     this.onDragEnter = this.onDragEnter.bind(this)
     this.onDragLeave = this.onDragLeave.bind(this)
     this.onDragOver = this.onDragOver.bind(this)
+    this.onDragStart = this.onDragStart.bind(this)
     this.onDrop = this.onDrop.bind(this)
     this.onFileDialogCancel = this.onFileDialogCancel.bind(this)
+    this.onInputElementClick = this.onInputElementClick.bind(this)
+
     this.setRef = this.setRef.bind(this)
     this.setRefs = this.setRefs.bind(this)
-    this.onInputElementClick = this.onInputElementClick.bind(this)
+
     this.isFileDialogActive = false
+
     this.state = {
       draggedFiles: [],
       acceptedFiles: [],
@@ -47,7 +43,7 @@ class Dropzone extends React.Component {
     this.dragTargets = []
 
     if (preventDropOnDocument) {
-      document.addEventListener('dragover', Dropzone.onDocumentDragOver, false)
+      document.addEventListener('dragover', onDocumentDragOver, false)
       document.addEventListener('drop', this.onDocumentDrop, false)
     }
     this.fileInputEl.addEventListener('click', this.onInputElementClick, false)
@@ -58,7 +54,7 @@ class Dropzone extends React.Component {
   componentWillUnmount() {
     const { preventDropOnDocument } = this.props
     if (preventDropOnDocument) {
-      document.removeEventListener('dragover', Dropzone.onDocumentDragOver)
+      document.removeEventListener('dragover', onDocumentDragOver)
       document.removeEventListener('drop', this.onDocumentDrop)
     }
     this.fileInputEl.removeEventListener('click', this.onInputElementClick, false)
@@ -66,6 +62,14 @@ class Dropzone extends React.Component {
     document.body.onfocus = null
   }
 
+  composeHandlers(handler) {
+    if (this.props.disabled) {
+      return null
+    }
+
+    return handler
+  }
+
   onDocumentDrop(evt) {
     if (this.node.contains(evt.target)) {
       // if we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
@@ -159,7 +163,10 @@ class Dropzone extends React.Component {
         }
       }
 
-      if (fileAccepted(file, accept) && this.fileMatchSize(file)) {
+      if (
+        fileAccepted(file, accept) &&
+        fileMatchSize(file, this.props.maxSize, this.props.minSize)
+      ) {
         acceptedFiles.push(file)
       } else {
         rejectedFiles.push(file)
@@ -207,7 +214,7 @@ class Dropzone extends React.Component {
 
       // in IE11/Edge the file-browser dialog is blocking, ensure this is behind setTimeout
       // this is so react can handle state changes in the onClick prop above above
-      // see: https://github.com/okonet/react-dropzone/issues/450
+      // see: https://github.com/react-dropzone/react-dropzone/issues/450
       setTimeout(this.open.bind(this), 0)
     }
   }
@@ -245,15 +252,6 @@ class Dropzone extends React.Component {
   setRefs(ref) {
     this.fileInputEl = ref
   }
-
-  fileMatchSize(file) {
-    return file.size <= this.props.maxSize && file.size >= this.props.minSize
-  }
-
-  allFilesAccepted(files) {
-    return files.every(file => fileAccepted(file, this.props.accept))
-  }
-
   /**
    * Open system file upload dialog.
    *
@@ -267,7 +265,12 @@ class Dropzone extends React.Component {
 
   renderChildren = (children, isDragActive, isDragAccept, isDragReject) => {
     if (typeof children === 'function') {
-      return children({ ...this.state, isDragActive, isDragAccept, isDragReject })
+      return children({
+        ...this.state,
+        isDragActive,
+        isDragAccept,
+        isDragReject
+      })
     }
     return children
   }
@@ -277,11 +280,13 @@ class Dropzone extends React.Component {
       accept,
       acceptClassName,
       activeClassName,
+      children,
+      disabled,
+      disabledClassName,
       inputProps,
       multiple,
       name,
       rejectClassName,
-      children,
       ...rest
     } = this.props
 
@@ -289,6 +294,7 @@ class Dropzone extends React.Component {
       acceptStyle,
       activeStyle,
       className,
+      disabledStyle,
       rejectStyle,
       style,
       ...props // eslint-disable-line prefer-const
@@ -297,9 +303,11 @@ class Dropzone extends React.Component {
     const { isDragActive, draggedFiles } = this.state
     const filesCount = draggedFiles.length
     const isMultipleAllowed = multiple || filesCount <= 1
-    const isDragAccept = filesCount > 0 && this.allFilesAccepted(draggedFiles)
+    const isDragAccept = filesCount > 0 && allFilesAccepted(draggedFiles, this.props.accept)
     const isDragReject = filesCount > 0 && (!isDragAccept || !isMultipleAllowed)
     className = className || ''
+    const noStyles =
+      !className && !style && !activeStyle && !acceptStyle && !rejectStyle && !disabledStyle
 
     if (isDragActive && activeClassName) {
       className += ' ' + activeClassName
@@ -310,27 +318,16 @@ class Dropzone extends React.Component {
     if (isDragReject && rejectClassName) {
       className += ' ' + rejectClassName
     }
+    if (disabled && disabledClassName) {
+      className += ' ' + disabledClassName
+    }
 
-    if (!className && !style && !activeStyle && !acceptStyle && !rejectStyle) {
-      style = {
-        width: 200,
-        height: 200,
-        borderWidth: 2,
-        borderColor: '#666',
-        borderStyle: 'dashed',
-        borderRadius: 5
-      }
-      activeStyle = {
-        borderStyle: 'solid',
-        borderColor: '#6c6',
-        backgroundColor: '#eee'
-      }
-      acceptStyle = activeStyle
-      rejectStyle = {
-        borderStyle: 'solid',
-        borderColor: '#c66',
-        backgroundColor: '#eee'
-      }
+    if (noStyles) {
+      style = styles.default
+      activeStyle = styles.active
+      acceptStyle = style.active
+      rejectStyle = styles.rejected
+      disabledStyle = styles.disabled
     }
 
     let appliedStyle = { ...style }
@@ -345,20 +342,29 @@ class Dropzone extends React.Component {
         ...appliedStyle,
         ...acceptStyle
       }
-    } else if (rejectStyle && isDragReject) {
+    }
+    if (rejectStyle && isDragReject) {
       appliedStyle = {
         ...appliedStyle,
         ...rejectStyle
       }
     }
+    if (disabledStyle && disabled) {
+      appliedStyle = {
+        ...style,
+        ...disabledStyle
+      }
+    }
 
     const inputAttributes = {
       accept,
+      disabled,
       type: 'file',
       style: { display: 'none' },
       multiple: supportMultiple && multiple,
       ref: this.setRefs,
-      onChange: this.onDrop
+      onChange: this.onDrop,
+      autoComplete: 'off'
     }
 
     if (name && name.length) {
@@ -385,13 +391,14 @@ class Dropzone extends React.Component {
         className={className}
         style={appliedStyle}
         {...divProps /* expand user provided props first so event handlers are never overridden */}
-        onClick={this.onClick}
-        onDragStart={this.onDragStart}
-        onDragEnter={this.onDragEnter}
-        onDragOver={this.onDragOver}
-        onDragLeave={this.onDragLeave}
-        onDrop={this.onDrop}
+        onClick={this.composeHandlers(this.onClick)}
+        onDragStart={this.composeHandlers(this.onDragStart)}
+        onDragEnter={this.composeHandlers(this.onDragEnter)}
+        onDragOver={this.composeHandlers(this.onDragOver)}
+        onDragLeave={this.composeHandlers(this.onDragLeave)}
+        onDrop={this.composeHandlers(this.onDrop)}
         ref={this.setRef}
+        aria-disabled={disabled}
       >
         {this.renderChildren(children, isDragActive, isDragAccept, isDragReject)}
         <input
@@ -403,13 +410,15 @@ class Dropzone extends React.Component {
   }
 }
 
+export default Dropzone
+
 Dropzone.propTypes = {
   /**
    * Allow specific types of files. See https://github.com/okonet/attr-accept for more information.
-   * Keep in mind that mime type determination is not reliable accross platforms. CSV files,
+   * Keep in mind that mime type determination is not reliable across platforms. CSV files,
    * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under
    * Windows. In some cases there might not be a mime type set at all.
-   * See: https://github.com/okonet/react-dropzone/issues/276
+   * See: https://github.com/react-dropzone/react-dropzone/issues/276
    */
   accept: PropTypes.string,
 
@@ -423,6 +432,11 @@ Dropzone.propTypes = {
    */
   disableClick: PropTypes.bool,
 
+  /**
+ * Enable/disable the dropzone entirely
+ */
+  disabled: PropTypes.bool,
+
   /**
    * Enable/disable preview generation
    */
@@ -478,6 +492,11 @@ Dropzone.propTypes = {
    */
   rejectClassName: PropTypes.string,
 
+  /**
+   * className for disabled state
+   */
+  disabledClassName: PropTypes.string,
+
   /**
    * CSS styles to apply
    */
@@ -498,6 +517,11 @@ Dropzone.propTypes = {
    */
   rejectStyle: PropTypes.object,
 
+  /**
+   * CSS styles to apply when dropzone is disabled
+   */
+  disabledStyle: PropTypes.object,
+
   /**
    * onClick callback
    * @param {Event} event
@@ -547,11 +571,10 @@ Dropzone.propTypes = {
 
 Dropzone.defaultProps = {
   preventDropOnDocument: true,
+  disabled: false,
   disablePreview: false,
   disableClick: false,
   multiple: true,
   maxSize: Infinity,
   minSize: 0
 }
-
-export default Dropzone

package/src/index.spec.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { mount, render } from 'enzyme'
 import { spy, stub } from 'sinon'
+import { onDocumentDragOver } from './utils'
 
 const Dropzone = require(process.env.NODE_ENV === 'production' ? '../dist/index' : './index') // eslint-disable-line import/no-dynamic-require
 const DummyChildComponent = () => null
@@ -8,6 +9,19 @@ const DummyChildComponent = () => null
 let files
 let images
 
+const rejectColor = 'red'
+const acceptColor = 'green'
+
+const rejectStyle = {
+  color: rejectColor,
+  borderColor: 'black'
+}
+
+const acceptStyle = {
+  color: acceptColor,
+  borderWidth: '5px'
+}
+
 describe('Dropzone', () => {
   beforeEach(() => {
     files = [
@@ -85,16 +99,8 @@ describe('Dropzone', () => {
 
     it('should render children function', () => {
       const content = <p>some content</p>
-      const dropzone = mount(
-        <Dropzone>
-          {content}
-        </Dropzone>
-      )
-      const dropzoneWithFunction = mount(
-        <Dropzone>
-          {() => content}
-        </Dropzone>
-      )
+      const dropzone = mount(<Dropzone>{content}</Dropzone>)
+      const dropzoneWithFunction = mount(<Dropzone>{() => content}</Dropzone>)
       expect(dropzoneWithFunction.html()).toEqual(dropzone.html())
     })
   })
@@ -126,7 +132,11 @@ describe('Dropzone', () => {
     }
 
     it('installs hooks to prevent stray drops from taking over the browser window', () => {
-      dropzone = mount(<Dropzone><p>Content</p></Dropzone>)
+      dropzone = mount(
+        <Dropzone>
+          <p>Content</p>
+        </Dropzone>
+      )
       expect(dropzone.html()).toMatchSnapshot()
       expect(document.addEventListener.callCount).toEqual(2)
       addEventCalls = collectEventListenerCalls(document.addEventListener.args)
@@ -138,7 +148,7 @@ describe('Dropzone', () => {
 
     it('terminates drags and drops on elements outside our dropzone', () => {
       const event = { preventDefault: spy() }
-      Dropzone.onDocumentDragOver(event)
+      onDocumentDragOver(event)
       expect(event.preventDefault.callCount).toEqual(1)
       event.preventDefault.reset()
 
@@ -206,10 +216,25 @@ describe('Dropzone', () => {
 
     it('should reset the value of input', () => {
       const dropzone = mount(<Dropzone />)
-      expect(dropzone.render().find('input').attr('value')).toBeUndefined()
-      expect(dropzone.render().find('input').attr('value', 10)).not.toBeUndefined()
+      expect(
+        dropzone
+          .render()
+          .find('input')
+          .attr('value')
+      ).toBeUndefined()
+      expect(
+        dropzone
+          .render()
+          .find('input')
+          .attr('value', 10)
+      ).not.toBeUndefined()
       dropzone.simulate('click')
-      expect(dropzone.render().find('input').attr('value')).toBeUndefined()
+      expect(
+        dropzone
+          .render()
+          .find('input')
+          .attr('value')
+      ).toBeUndefined()
     })
 
     it('should trigger click even on the input', done => {
@@ -320,9 +345,7 @@ describe('Dropzone', () => {
       )
 
       // And using then we'll call the onDragOver with the proxy instead of event
-      const dragOverSpy = stub(
-        component.instance(),
-        'onDragOver',
+      const dragOverSpy = stub(component.instance(), 'onDragOver').callsFake(
         component.instance().onDragOver(eventProxy)
       )
 
@@ -339,11 +362,7 @@ describe('Dropzone', () => {
     })
 
     it('should set proper dragActive state on dragEnter', () => {
-      const dropzone = mount(
-        <Dropzone>
-          {props => <DummyChildComponent {...props} />}
-        </Dropzone>
-      )
+      const dropzone = mount(<Dropzone>{props => <DummyChildComponent {...props} />}</Dropzone>)
       const child = dropzone.find(DummyChildComponent)
       dropzone.simulate('dragEnter', { dataTransfer: { files } })
       expect(child).toHaveProp('isDragActive', true)
@@ -353,12 +372,12 @@ describe('Dropzone', () => {
 
     it('should set proper dragReject state on dragEnter', () => {
       const dropzone = mount(
-        <Dropzone accept="image/*">
-          {props => <DummyChildComponent {...props} />}
-        </Dropzone>
+        <Dropzone accept="image/*">{props => <DummyChildComponent {...props} />}</Dropzone>
       )
       const child = dropzone.find(DummyChildComponent)
-      dropzone.simulate('dragEnter', { dataTransfer: { files: files.concat(images) } })
+      dropzone.simulate('dragEnter', {
+        dataTransfer: { files: files.concat(images) }
+      })
       expect(child).toHaveProp('isDragActive', true)
       expect(child).toHaveProp('isDragAccept', false)
       expect(child).toHaveProp('isDragReject', true)
@@ -390,12 +409,62 @@ describe('Dropzone', () => {
       expect(child).toHaveProp('isDragReject', true)
     })
 
-    it('should set proper dragActive state if accept prop changes mid-drag', () => {
+    it('should apply acceptStyle if multiple is false and single file', () => {
       const dropzone = mount(
-        <Dropzone accept="image/*">
+        <Dropzone
+          accept="image/*"
+          multiple={false}
+          acceptStyle={acceptStyle}
+          rejectStyle={rejectStyle}
+        >
+          {props => <DummyChildComponent {...props} />}
+        </Dropzone>
+      )
+      dropzone.simulate('dragEnter', { dataTransfer: { files: [images[0]] } })
+      const mainDiv = dropzone.find('div').at(0)
+      expect(mainDiv).toHaveProp('style', acceptStyle)
+    })
+
+    it('should apply rejectStyle if multiple is false and single bad file type', () => {
+      const dropzone = mount(
+        <Dropzone
+          accept="image/*"
+          multiple={false}
+          acceptStyle={acceptStyle}
+          rejectStyle={rejectStyle}
+        >
+          {props => <DummyChildComponent {...props} />}
+        </Dropzone>
+      )
+      dropzone.simulate('dragEnter', { dataTransfer: { files: [files[0]] } })
+      const mainDiv = dropzone.find('div').at(0)
+      expect(mainDiv).toHaveProp('style', rejectStyle)
+    })
+
+    it('should apply acceptStyle + rejectStyle if multiple is false and multiple good file types', () => {
+      const dropzone = mount(
+        <Dropzone
+          accept="image/*"
+          multiple={false}
+          acceptStyle={acceptStyle}
+          rejectStyle={rejectStyle}
+        >
           {props => <DummyChildComponent {...props} />}
         </Dropzone>
       )
+      dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+      const mainDiv = dropzone.find('div').at(0)
+      const expectedStyle = {
+        ...acceptStyle,
+        ...rejectStyle
+      }
+      expect(mainDiv).toHaveProp('style', expectedStyle)
+    })
+
+    it('should set proper dragActive state if accept prop changes mid-drag', () => {
+      const dropzone = mount(
+        <Dropzone accept="image/*">{props => <DummyChildComponent {...props} />}</Dropzone>
+      )
       const child = dropzone.find(DummyChildComponent)
       dropzone.simulate('dragEnter', { dataTransfer: { files: images } })
       expect(child).toHaveProp('isDragActive', true)
@@ -507,7 +576,9 @@ describe('Dropzone', () => {
 
     it('should add invalid files to rejected when multiple is false', () => {
       const dropzone = mount(<Dropzone accept="image/*" onDrop={dropSpy} multiple={false} />)
-      dropzone.simulate('drop', { dataTransfer: { files: images.concat(files) } })
+      dropzone.simulate('drop', {
+        dataTransfer: { files: images.concat(files) }
+      })
       const rejected = dropSpy.firstCall.args[1]
       expect(rejected.length).toEqual(2)
     })
@@ -551,7 +622,9 @@ describe('Dropzone', () => {
       dropzone.simulate('drop', { dataTransfer: { files: images } })
       expect(dropSpy.callCount).toEqual(2)
       expect(dropSpy.lastCall.args[0]).toEqual([...images], [])
-      dropzone.simulate('drop', { dataTransfer: { files: files.concat(images) } })
+      dropzone.simulate('drop', {
+        dataTransfer: { files: files.concat(images) }
+      })
       expect(dropSpy.callCount).toEqual(3)
       expect(dropSpy.lastCall.args[0]).toEqual([...images], [...files])
     })
@@ -570,7 +643,9 @@ describe('Dropzone', () => {
       dropzone.simulate('drop', { dataTransfer: { files: images } })
       expect(dropAcceptedSpy.callCount).toEqual(1)
       expect(dropAcceptedSpy.lastCall.args[0]).toEqual([...images])
-      dropzone.simulate('drop', { dataTransfer: { files: files.concat(images) } })
+      dropzone.simulate('drop', {
+        dataTransfer: { files: files.concat(images) }
+      })
       expect(dropAcceptedSpy.callCount).toEqual(2)
       expect(dropAcceptedSpy.lastCall.args[0]).toEqual([...images])
     })
@@ -589,7 +664,9 @@ describe('Dropzone', () => {
       expect(dropRejectedSpy.lastCall.args[0]).toEqual([...files])
       dropzone.simulate('drop', { dataTransfer: { files: images } })
       expect(dropRejectedSpy.callCount).toEqual(1)
-      dropzone.simulate('drop', { dataTransfer: { files: files.concat(images) } })
+      dropzone.simulate('drop', {
+        dataTransfer: { files: files.concat(images) }
+      })
       expect(dropRejectedSpy.callCount).toEqual(2)
       expect(dropRejectedSpy.lastCall.args[0]).toEqual([...files])
     })
@@ -665,7 +742,9 @@ describe('Dropzone', () => {
           onDropRejected={dropRejectedSpy}
         />
       )
-      dropzone.simulate('drop', { dataTransfer: { files: files.concat(images) } })
+      dropzone.simulate('drop', {
+        dataTransfer: { files: files.concat(images) }
+      })
       expect(dropSpy.callCount).toEqual(1)
       expect(dropSpy.firstCall.args[0]).toHaveLength(3)
       expect(dropSpy.firstCall.args[1]).toHaveLength(0)
@@ -755,7 +834,9 @@ describe('Dropzone', () => {
           onDropRejected={dropRejectedSpy}
         />
       )
-      dropzone.simulate('drop', { dataTransfer: { files: files.concat(images) } })
+      dropzone.simulate('drop', {
+        dataTransfer: { files: files.concat(images) }
+      })
       expect(dropSpy.callCount).toEqual(1)
       expect(dropSpy.firstCall.args[0]).toHaveLength(3)
       expect(dropSpy.firstCall.args[1]).toHaveLength(0)
@@ -897,7 +978,9 @@ describe('Dropzone', () => {
       })
 
       it('does dragEnter on both dropzones', () => {
-        innerDropzone.simulate('dragEnter', { dataTransfer: { files: images } })
+        innerDropzone.simulate('dragEnter', {
+          dataTransfer: { files: images }
+        })
         expect(innerDropzone).toHaveProp('isDragActive', true)
         expect(innerDropzone).toHaveProp('isDragReject', false)
         expect(innerDropzone.find(InnerDragAccepted).exists()).toEqual(true)
@@ -905,7 +988,9 @@ describe('Dropzone', () => {
       })
 
       it('drops on the child dropzone', () => {
-        innerDropzone.simulate('drop', { dataTransfer: { files: files.concat(images) } })
+        innerDropzone.simulate('drop', {
+          dataTransfer: { files: files.concat(images) }
+        })
       })
 
       it('accepts the drop on the inner dropzone', () => {
@@ -941,5 +1026,29 @@ describe('Dropzone', () => {
       const fn = () => dropzone.simulate('drop', { dataTransfer: { files: [] } })
       expect(fn).not.toThrow()
     })
+
+    it('does not allow actions when disabled props is true', done => {
+      const dropzone = mount(<Dropzone disabled />)
+
+      spy(dropzone.instance(), 'open')
+      dropzone.simulate('click')
+      setTimeout(() => {
+        expect(dropzone.instance().open.callCount).toEqual(0)
+        done()
+      }, 0)
+    })
+
+    it('when toggle disabled props, Dropzone works as expected', done => {
+      const dropzone = mount(<Dropzone disabled />)
+      spy(dropzone.instance(), 'open')
+
+      dropzone.setProps({ disabled: false })
+
+      dropzone.simulate('click')
+      setTimeout(() => {
+        expect(dropzone.instance().open.callCount).toEqual(1)
+        done()
+      }, 0)
+    })
   })
 })

package/src/utils/index.js

@@ -0,0 +1,43 @@
+import accepts from 'attr-accept'
+
+export const supportMultiple =
+  typeof document !== 'undefined' && document && document.createElement
+    ? 'multiple' in document.createElement('input')
+    : true
+
+export function getDataTransferItems(event) {
+  let dataTransferItemsList = []
+  if (event.dataTransfer) {
+    const dt = event.dataTransfer
+    if (dt.files && dt.files.length) {
+      dataTransferItemsList = dt.files
+    } else if (dt.items && dt.items.length) {
+      // During the drag even the dataTransfer.files is null
+      // but Chrome implements some drag store, which is accesible via dataTransfer.items
+      dataTransferItemsList = dt.items
+    }
+  } else if (event.target && event.target.files) {
+    dataTransferItemsList = event.target.files
+  }
+  // Convert from DataTransferItemsList to the native Array
+  return Array.prototype.slice.call(dataTransferItemsList)
+}
+
+// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
+// that MIME type will always be accepted
+export function fileAccepted(file, accept) {
+  return file.type === 'application/x-moz-file' || accepts(file, accept)
+}
+
+export function fileMatchSize(file, maxSize, minSize) {
+  return file.size <= maxSize && file.size >= minSize
+}
+
+export function allFilesAccepted(files, accept) {
+  return files.every(file => fileAccepted(file, accept))
+}
+
+// allow the entire document to be a drag target
+export function onDocumentDragOver(evt) {
+  evt.preventDefault()
+}