react-dropzone - npm Package Compare versions

Comparing version 6.0.1 to 6.0.2

dist/es/index.js

@@ -20,3 +20,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 import PropTypes from 'prop-types';
-import { supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, getDataTransferItems as defaultGetDataTransferItem, isIeOrEdge, hasFiles } from './utils';
+import { supportMultiple, fileAccepted, allFilesAccepted, fileMatchSize, onDocumentDragOver, getDataTransferItems as defaultGetDataTransferItem, isIeOrEdge, isFileList } from './utils';
 import styles from './utils/styles';
@@ -122,3 +122,3 @@
       Promise.resolve(this.props.getDataTransferItems(evt)).then(function (draggedFiles) {
-        if (hasFiles(draggedFiles) && _this2.props.onDragStart) {
+        if (isFileList(draggedFiles) && _this2.props.onDragStart) {
           _this2.props.onDragStart.call(_this2, evt);
@@ -143,3 +143,3 @@ }
       Promise.resolve(this.props.getDataTransferItems(evt)).then(function (draggedFiles) {
-        if (hasFiles(draggedFiles)) {
+        if (isFileList(draggedFiles)) {
           _this3.setState({
@@ -174,3 +174,3 @@ isDragActive: true, // Do not rely on files for the drag state. It doesn't work in Safari.
       Promise.resolve(this.props.getDataTransferItems(evt)).then(function (draggedFiles) {
-        if (hasFiles(draggedFiles) && _this4.props.onDragOver) {
+        if (isFileList(draggedFiles) && _this4.props.onDragOver) {
           _this4.props.onDragOver.call(_this4, evt);
@@ -204,3 +204,3 @@ }
       Promise.resolve(this.props.getDataTransferItems(evt)).then(function (draggedFiles) {
-        if (hasFiles(draggedFiles) && _this5.props.onDragLeave) {
+        if (isFileList(draggedFiles) && _this5.props.onDragLeave) {
           _this5.props.onDragLeave.call(_this5, evt);
@@ -272,3 +272,3 @@ }
 
-        if (hasFiles(fileList) && onDrop) {
+        if (isFileList(fileList) && onDrop) {
           onDrop.call(_this6, acceptedFiles, rejectedFiles, evt);
@@ -275,0 +275,0 @@ }

dist/es/utils/index.js

@@ -0,1 +1,3 @@
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 import accepts from 'attr-accept';
@@ -10,2 +12,4 @@
 
+    // NOTE: Only the 'drop' event has access to DataTransfer.files,
+    // otherwise it will always be empty
     if (dt.files && dt.files.length) {
@@ -16,11 +20,3 @@ dataTransferItemsList = dt.files;
       // but Chrome implements some drag store, which is accesible via dataTransfer.items
-      // Map the items to File objects,
-      // and filter non-File items
-      // see https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFile
-      var files = Array.prototype.map.call(dt.items, function (item) {
-        return item.getAsFile();
-      });
-      dataTransferItemsList = Array.prototype.filter.call(files, function (file) {
-        return file !== null;
-      });
+      dataTransferItemsList = dt.items;
     }
@@ -51,10 +47,14 @@ } else if (event.target && event.target.files) {
 
-export function hasFiles(files) {
-  // Allow only files and retun the items as a list of File,
-  // see https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem for details
-  return Array.isArray(files) && files.length > 0 && Array.prototype.every.call(files, function (file) {
-    return file instanceof File;
-  });
+export function isFileList(items) {
+  // Returns true only for items that are File objects or DataTransferItem of kind 'file',
+  // See https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem for details
+  return Array.isArray(items) && items.length > 0 && (Array.prototype.every.call(items, function (item) {
+    return item instanceof File;
+  }) || Array.prototype.every.call(items, isKindFile));
 }
 
+export function isKindFile(item) {
+  return (typeof item === 'undefined' ? 'undefined' : _typeof(item)) === 'object' && item.kind === 'file';
+}
+
 // allow the entire document to be a drag target
@@ -61,0 +61,0 @@ export function onDocumentDragOver(evt) {

examples/Accept/Readme.md

@@ -12,3 +12,3 @@ By providing `accept` prop you can make Dropzone to accept specific file types and reject the others.
 
-```
+```jsx harmony
 class Accept extends React.Component {
@@ -15,0 +15,0 @@ constructor() {

examples/Basic/Readme.md

 Dropzone with default properties and displays list of the dropped files.
 
-```
+```jsx harmony
 class Basic extends React.Component {
@@ -42,3 +42,3 @@ constructor() {
 
-```
+```jsx harmony
 class Basic extends React.Component {
@@ -45,0 +45,0 @@ constructor() {

examples/Fullscreen/Readme.md

 You can wrap the whole app into the dropzone. This will make the whole app a Dropzone target.
 
-```
+```jsx harmony
 class FullScreen extends React.Component {
@@ -5,0 +5,0 @@ constructor() {

package.json

@@ -146,3 +146,3 @@ {
   },
-  "version": "6.0.1",
+  "version": "6.0.2",
   "engines": {
@@ -149,0 +149,0 @@ "node": ">= 6"

README.md

@@ -98,3 +98,3 @@ ![react-dropzone logo](https://raw.githubusercontent.com/react-dropzone/react-dropzone/master/logo/logo.png)
 *Important*: `react-dropzone` makes its drag'n'drop callbacks asynchronous to enable promise based getDataTransfer functions. In order to properly test this, you may want to utilize a helper function to run all promises like this:
-```js
+```js static
 const flushPromises = () => new Promise(resolve => setImmediate(resolve));
@@ -104,4 +104,3 @@ ```
 Example with enzyme 3:
-```js
-
+```js static
 it('tests drag state', async () => {
@@ -108,0 +107,0 @@ const flushPromises = () => new Promise(resolve => setImmediate(resolve));

src/index.js

@@ -14,3 +14,3 @@ /* global process */
   isIeOrEdge,
-  hasFiles
+  isFileList
 } from './utils'
@@ -90,3 +90,3 @@ import styles from './utils/styles'
     Promise.resolve(this.props.getDataTransferItems(evt)).then(draggedFiles => {
-      if (hasFiles(draggedFiles) && this.props.onDragStart) {
+      if (isFileList(draggedFiles) && this.props.onDragStart) {
         this.props.onDragStart.call(this, evt)
@@ -108,3 +108,3 @@ }
     Promise.resolve(this.props.getDataTransferItems(evt)).then(draggedFiles => {
-      if (hasFiles(draggedFiles)) {
+      if (isFileList(draggedFiles)) {
         this.setState({
@@ -136,3 +136,3 @@ isDragActive: true, // Do not rely on files for the drag state. It doesn't work in Safari.
     Promise.resolve(this.props.getDataTransferItems(evt)).then(draggedFiles => {
-      if (hasFiles(draggedFiles) && this.props.onDragOver) {
+      if (isFileList(draggedFiles) && this.props.onDragOver) {
         this.props.onDragOver.call(this, evt)
@@ -161,3 +161,3 @@ }
     Promise.resolve(this.props.getDataTransferItems(evt)).then(draggedFiles => {
-      if (hasFiles(draggedFiles) && this.props.onDragLeave) {
+      if (isFileList(draggedFiles) && this.props.onDragLeave) {
         this.props.onDragLeave.call(this, evt)
@@ -229,3 +229,3 @@ }
 
-      if (hasFiles(fileList) && onDrop) {
+      if (isFileList(fileList) && onDrop) {
         onDrop.call(this, acceptedFiles, rejectedFiles, evt)
@@ -232,0 +232,0 @@ }

src/index.spec.js

@@ -52,6 +52,3 @@ /* eslint jsx-a11y/click-events-have-key-events: 0 */
         kind: 'string',
-        type: 'text/plain',
-        getAsFile() {
-          return null
-        }
+        type: 'text/plain'
       }
@@ -58,0 +55,0 @@ ]

src/utils/index.js

@@ -13,2 +13,4 @@ import accepts from 'attr-accept'
 
+    // NOTE: Only the 'drop' event has access to DataTransfer.files,
+    // otherwise it will always be empty
     if (dt.files && dt.files.length) {
@@ -19,7 +21,3 @@ dataTransferItemsList = dt.files
       // but Chrome implements some drag store, which is accesible via dataTransfer.items
-      // Map the items to File objects,
-      // and filter non-File items
-      // see https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFile
-      const files = Array.prototype.map.call(dt.items, item => item.getAsFile())
-      dataTransferItemsList = Array.prototype.filter.call(files, file => file !== null)
+      dataTransferItemsList = dt.items
     }
@@ -48,12 +46,17 @@ } else if (event.target && event.target.files) {
 
-export function hasFiles(files) {
-  // Allow only files and retun the items as a list of File,
-  // see https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem for details
+export function isFileList(items) {
+  // Returns true only for items that are File objects or DataTransferItem of kind 'file',
+  // See https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem for details
   return (
-    Array.isArray(files) &&
-    files.length > 0 &&
-    Array.prototype.every.call(files, file => file instanceof File)
+    Array.isArray(items) &&
+    items.length > 0 &&
+    (Array.prototype.every.call(items, item => item instanceof File) ||
+      Array.prototype.every.call(items, isKindFile))
   )
 }
 
+export function isKindFile(item) {
+  return typeof item === 'object' && item.kind === 'file'
+}
+
 // allow the entire document to be a drag target
@@ -60,0 +63,0 @@ export function onDocumentDragOver(evt) {

src/utils/index.spec.js

@@ -1,2 +0,2 @@
-import { getDataTransferItems, isIeOrEdge, hasFiles } from './'
+import { getDataTransferItems, isIeOrEdge, isFileList } from './'
 
@@ -24,6 +24,3 @@ const files = [
     kind: 'string',
-    type: 'text/plain',
-    getAsFile() {
-      return null
-    }
+    type: 'text/plain'
   }
@@ -42,6 +39,3 @@ ]
     kind: 'file',
-    type: 'application/json',
-    getAsFile() {
-      return file
-    }
+    type: 'application/json'
   }
@@ -85,16 +79,2 @@ ]
 
-  it('should ignore dataTransfer.items that are not of kind "file"', () => {
-    const event = {
-      target: {
-        files: [{}]
-      },
-      dataTransfer: {
-        items: nonFileItems
-      }
-    }
-    const res = getDataTransferItems(event)
-    expect(res).toBeInstanceOf(Array)
-    expect(res).toHaveLength(0)
-  })
-
   it('should use event.target if dataTransfer is not defined', () => {
@@ -164,9 +144,10 @@ const event = {
 
-describe('hasFiles', () => {
-  it('should only return true for an Array of File objects', () => {
-    expect(hasFiles([file])).toBe(true)
-    expect(hasFiles(['domNode'])).toBe(false)
-    expect(hasFiles([])).toBe(false)
-    expect(hasFiles(null)).toBe(false)
+describe('isFileList', () => {
+  it('should only return true for an Array of File objects or DataTransferItem of kind file', () => {
+    expect(isFileList([file])).toBe(true)
+    expect(isFileList(fileItems)).toBe(true)
+    expect(isFileList(nonFileItems)).toBe(false)
+    expect(isFileList([])).toBe(false)
+    expect(isFileList(null)).toBe(false)
   })
 })

styleguide.config.js

@@ -15,2 +15,3 @@ /* eslint import/no-extraneous-dependencies: 0 */
     {
+      name: '',
       content: 'README.md'
@@ -17,0 +18,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

215917

increased by0.07%

Worsened metrics

Lines of code

3356

decreased by-0.59%

Number of lines in readme file

199

decreased by-0.5%

No dependency changes