react-dropzone 10.1.8 → 10.2.1

package/.eslintignore

@@ -1,4 +1,5 @@
 dist/
 coverage/
 typings/*
+styleguide/*
 !.babelrc.js

package/.eslintrc

@@ -1,5 +1,25 @@
 {
-  "extends": ["okonet/node"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2017,
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "jest": true
+  },
+  "plugins": [
+    "import",
+    "node",
+    "prettier"
+  ],
+  "extends": [
+    // TODO: Fix this so we can use
+    // "okonet/node"
+    "eslint:recommended",
+    "prettier"
+  ],
   "rules": {
     "strict": 0,
     "node/no-unpublished-require": 0,

package/README.md

@@ -3,7 +3,7 @@
 # react-dropzone
 
 [![npm](https://img.shields.io/npm/v/react-dropzone.svg?style=flat-square)](https://www.npmjs.com/package/react-dropzone)
-[![Build Status](https://img.shields.io/travis/react-dropzone/react-dropzone/master.svg?style=flat-square)](https://travis-ci.org/react-dropzone/react-dropzone)
+![Build Status](https://github.com/react-dropzone/react-dropzone/workflows/Test/badge.svg)
 [![codecov](https://img.shields.io/codecov/c/gh/react-dropzone/react-dropzone/master.svg?style=flat-square)](https://codecov.io/gh/react-dropzone/react-dropzone)
 [![Open Collective](https://img.shields.io/opencollective/backers/react-dropzone.svg?style=flat-square)](#backers)
 [![Open Collective](https://img.shields.io/opencollective/sponsors/react-dropzone.svg?style=flat-square)](#sponsors)
@@ -81,20 +81,22 @@ import React, {useCallback} from 'react'
 import {useDropzone} from 'react-dropzone'
 
 function MyDropzone() {
-  const onDrop = useCallback(acceptedFiles => {
-    const reader = new FileReader()
+  const onDrop = useCallback((acceptedFiles) => {
+    acceptedFiles.forEach((file) => {
+      const reader = new FileReader()
 
-    reader.onabort = () => console.log('file reading was aborted')
-    reader.onerror = () => console.log('file reading has failed')
-    reader.onload = () => {
+      reader.onabort = () => console.log('file reading was aborted')
+      reader.onerror = () => console.log('file reading has failed')
+      reader.onload = () => {
       // Do whatever you want with the file contents
-      const binaryStr = reader.result
-      console.log(binaryStr)
-    }
-
-    acceptedFiles.forEach(file => reader.readAsBinaryString(file))
+        const binaryStr = reader.result
+        console.log(binaryStr)
+      }
+      reader.readAsArrayBuffer(file)
+    })
+    
   }, [])
-  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})
+  const {getRootProps, getInputProps} = useDropzone({onDrop})
 
   return (
     <div {...getRootProps()}>

package/dist/es/index.js

@@ -10,22 +10,22 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
 
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 /* eslint prefer-template: 0 */
-import React, { forwardRef, Fragment, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import React, { forwardRef, Fragment, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { fromEvent } from 'file-selector';
 import { allFilesAccepted, composeEventHandlers, fileAccepted, fileMatchSize, isEvtWithFiles, isIeOrEdge, isPropagationStopped, onDocumentDragOver } from './utils/index';
@@ -52,25 +52,11 @@ var Dropzone = forwardRef(function (_ref, ref) {
       open = _useDropzone.open,
       props = _objectWithoutProperties(_useDropzone, ["open"]);
 
-  useEffect(function () {
-    if (typeof ref === 'function') {
-      ref({
-        open: open
-      });
-    } else if (_typeof(ref) === 'object' && ref !== null) {
-      ref.current = {
-        open: open
-      };
-    }
-
-    return function () {
-      if (typeof ref === 'function') {
-        ref(null);
-      } else if (_typeof(ref) === 'object' && ref !== null) {
-        ref.current = null;
-      }
+  useImperativeHandle(ref, function () {
+    return {
+      open: open
     };
-  }, [ref]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
+  }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
   return React.createElement(Fragment, null, children(_objectSpread({}, props, {
     open: open
@@ -309,80 +295,80 @@ var initialState = {
   draggedFiles: [],
   acceptedFiles: [],
   rejectedFiles: []
-  /**
-   * A React hook that creates a drag 'n' drop area.
-   *
-   * ```jsx
-   * function MyDropzone(props) {
-   *   const {getRootProps, getInputProps} = useDropzone({
-   *     onDrop: acceptedFiles => {
-   *       // do something with the File objects, e.g. upload to some server
-   *     }
-   *   });
-   *   return (
-   *     <div {...getRootProps()}>
-   *       <input {...getInputProps()} />
-   *       <p>Drag and drop some files here, or click to select files</p>
-   *     </div>
-   *   )
-   * }
-   * ```
-   *
-   * @function useDropzone
-   *
-   * @param {object} props
-   * @param {string|string[]} [props.accept] Set accepted file types.
-   * See https://github.com/okonet/attr-accept for more information.
-   * 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/react-dropzone/react-dropzone/issues/276
-   * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files
-   * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window
-   * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog
-   * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.
-   * Note that it also stops tracking the focus state.
-   * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop
-   * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents
-   * @param {number} [props.minSize=0] Minimum file size (in bytes)
-   * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)
-   * @param {boolean} [props.disabled=false] Enable/disable the dropzone
-   * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator
-   * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection
-   * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.
-   * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs
-   * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs
-   * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.
-   * Note that this callback is invoked after the `getFilesFromEvent` callback is done.
-   *
-   * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.
-   * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.
-   * If `multiple` is set to false and additional files are droppped,
-   * all files besides the first will be rejected.
-   * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.
-   *
-   * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.
-   * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.
-   *
-   * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
-   * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
-   *
-   * ```js
-   * function onDrop(acceptedFiles) {
-   *   const req = request.post('/upload')
-   *   acceptedFiles.forEach(file => {
-   *     req.attach(file.name, file)
-   *   })
-   *   req.end(callback)
-   * }
-   * ```
-   * @param {dropAcceptedCb} [props.onDropAccepted]
-   * @param {dropRejectedCb} [props.onDropRejected]
-   *
-   * @returns {DropzoneState}
-   */
-
 };
+/**
+ * A React hook that creates a drag 'n' drop area.
+ *
+ * ```jsx
+ * function MyDropzone(props) {
+ *   const {getRootProps, getInputProps} = useDropzone({
+ *     onDrop: acceptedFiles => {
+ *       // do something with the File objects, e.g. upload to some server
+ *     }
+ *   });
+ *   return (
+ *     <div {...getRootProps()}>
+ *       <input {...getInputProps()} />
+ *       <p>Drag and drop some files here, or click to select files</p>
+ *     </div>
+ *   )
+ * }
+ * ```
+ *
+ * @function useDropzone
+ *
+ * @param {object} props
+ * @param {string|string[]} [props.accept] Set accepted file types.
+ * See https://github.com/okonet/attr-accept for more information.
+ * 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/react-dropzone/react-dropzone/issues/276
+ * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files
+ * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window
+ * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog
+ * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.
+ * Note that it also stops tracking the focus state.
+ * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop
+ * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents
+ * @param {number} [props.minSize=0] Minimum file size (in bytes)
+ * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)
+ * @param {boolean} [props.disabled=false] Enable/disable the dropzone
+ * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator
+ * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection
+ * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.
+ * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs
+ * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs
+ * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.
+ * Note that this callback is invoked after the `getFilesFromEvent` callback is done.
+ *
+ * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.
+ * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.
+ * If `multiple` is set to false and additional files are droppped,
+ * all files besides the first will be rejected.
+ * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.
+ *
+ * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.
+ * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.
+ *
+ * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
+ * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
+ *
+ * ```js
+ * function onDrop(acceptedFiles) {
+ *   const req = request.post('/upload')
+ *   acceptedFiles.forEach(file => {
+ *     req.attach(file.name, file)
+ *   })
+ *   req.end(callback)
+ * }
+ * ```
+ * @param {dropAcceptedCb} [props.onDropAccepted]
+ * @param {dropRejectedCb} [props.onDropRejected]
+ *
+ * @returns {DropzoneState}
+ */
+
 export function useDropzone() {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       accept = _ref2.accept,
@@ -426,7 +412,7 @@ export function useDropzone() {
       isFileDialogActive = state.isFileDialogActive,
       draggedFiles = state.draggedFiles; // Fn for opening the file dialog programmatically
 
-  var openFileDialog = function openFileDialog() {
+  var openFileDialog = useCallback(function () {
     if (inputRef.current) {
       dispatch({
         type: 'openDialog'
@@ -434,8 +420,7 @@ export function useDropzone() {
       inputRef.current.value = null;
       inputRef.current.click();
     }
-  }; // Update file dialog active state when the window is focused on
-
+  }, [dispatch]); // Update file dialog active state when the window is focused on
 
   var onWindowFocus = function onWindowFocus() {
     // Execute the timeout only if the file dialog is opened in the browser
@@ -502,11 +487,7 @@ export function useDropzone() {
       openFileDialog();
     }
   }, [inputRef, noClick]);
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      dragTargets = _useState2[0],
-      setDragTargets = _useState2[1];
+  var dragTargetsRef = useRef([]);
 
   var onDocumentDrop = function onDocumentDrop(event) {
     if (rootRef.current && rootRef.current.contains(event.target)) {
@@ -515,7 +496,7 @@ export function useDropzone() {
     }
 
     event.preventDefault();
-    setDragTargets([]);
+    dragTargetsRef.current = [];
   };
 
   useEffect(function () {
@@ -537,8 +518,8 @@ export function useDropzone() {
     event.persist();
     stopPropagation(event); // Count the dropzone and any children that are entered.
 
-    if (dragTargets.indexOf(event.target) === -1) {
-      setDragTargets([].concat(_toConsumableArray(dragTargets), [event.target]));
+    if (dragTargetsRef.current.indexOf(event.target) === -1) {
+      dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);
     }
 
     if (isEvtWithFiles(event)) {
@@ -558,7 +539,7 @@ export function useDropzone() {
         }
       });
     }
-  }, [dragTargets, getFilesFromEvent, onDragEnter, noDragEventsBubbling]);
+  }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);
   var onDragOverCb = useCallback(function (event) {
     event.preventDefault();
     event.persist();
@@ -583,11 +564,10 @@ export function useDropzone() {
     event.persist();
     stopPropagation(event); // Only deactivate once the dropzone and all children have been left
 
-    var targets = _toConsumableArray(dragTargets.filter(function (target) {
+    var targets = dragTargetsRef.current.filter(function (target) {
       return target !== event.target && rootRef.current && rootRef.current.contains(target);
-    }));
-
-    setDragTargets(targets);
+    });
+    dragTargetsRef.current = targets;
 
     if (targets.length > 0) {
       return;
@@ -602,13 +582,13 @@ export function useDropzone() {
     if (isEvtWithFiles(event) && onDragLeave) {
       onDragLeave(event);
     }
-  }, [rootRef, dragTargets, onDragLeave, noDragEventsBubbling]);
+  }, [rootRef, onDragLeave, noDragEventsBubbling]);
   var onDropCb = useCallback(function (event) {
     event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done
 
     event.persist();
     stopPropagation(event);
-    setDragTargets([]);
+    dragTargetsRef.current = [];
     dispatch({
       type: 'reset'
     });
@@ -622,7 +602,7 @@ export function useDropzone() {
         var acceptedFiles = [];
         var rejectedFiles = [];
         files.forEach(function (file) {
-          if (fileAccepted(file, accept) && fileMatchSize(file, maxSize, minSize)) {
+          if (fileAccepted(file, accept) && fileMatchSize(file, minSize, maxSize)) {
             acceptedFiles.push(file);
           } else {
             rejectedFiles.push(file);
@@ -698,7 +678,7 @@ export function useDropzone() {
         onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb))
       }, refKey, rootRef), !disabled && !noKeyboard ? {
         tabIndex: 0
-      } : {}, rest);
+      } : {}, {}, rest);
     };
   }, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);
   var onInputElementClick = useCallback(function (event) {
@@ -726,12 +706,12 @@ export function useDropzone() {
         tabIndex: -1
       }, refKey, inputRef);
 
-      return _objectSpread({}, inputProps, rest);
+      return _objectSpread({}, inputProps, {}, rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
   var fileCount = draggedFiles.length;
   var isMultipleAllowed = multiple || fileCount <= 1;
-  var isDragAccept = fileCount > 0 && allFilesAccepted(draggedFiles, accept);
+  var isDragAccept = fileCount > 0 && allFilesAccepted(draggedFiles, accept, minSize, maxSize);
   var isDragReject = fileCount > 0 && (!isDragAccept || !isMultipleAllowed);
   return _objectSpread({}, state, {
     isDragAccept: isDragAccept,

package/dist/es/utils/index.js

@@ -6,12 +6,21 @@ import accepts from 'attr-accept'; // Firefox versions prior to 53 return a bogu
 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 fileMatchSize(file, minSize, maxSize) {
+  if (isDefined(file.size)) {
+    if (isDefined(minSize) && isDefined(maxSize)) return file.size >= minSize && file.size <= maxSize;else if (isDefined(minSize)) return file.size >= minSize;else if (isDefined(maxSize)) return file.size <= maxSize;
+  }
+
+  return true;
 }
-export function allFilesAccepted(files, accept) {
+
+function isDefined(value) {
+  return value !== undefined && value !== null;
+}
+
+export function allFilesAccepted(files, accept, minSize, maxSize) {
   return files.every(function (file) {
-    return fileAccepted(file, accept);
+    return fileAccepted(file, accept) && fileMatchSize(file, minSize, maxSize);
   });
 } // React's synthetic events has event.isPropagationStopped,
 // but to remain compatibility with other libs (Preact) fall back