fix(edge): drag a link trigger drop event

react-dropzone · Oct 11, 2018 · d6cc063 · d6cc063
1 parent f016c8d
commit d6cc063
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,3 @@
-/* global process */
 /* eslint prefer-template: 0 */
 
 import React from 'react'
@@ -194,15 +193,16 @@ class Dropzone extends React.Component {
       const acceptedFiles = []
       const rejectedFiles = []
 
+      if (
+        !isFileList(fileList) ||
+        (isIeOrEdge() && evt.dataTransfer && !isFileList(Array.from(evt.dataTransfer.items)))
+      ) {
+        return
+      }
+
       fileList.forEach(file => {
         if (!disablePreview) {
-          try {
-            file.preview = window.URL.createObjectURL(file) // eslint-disable-line no-param-reassign
-          } catch (err) {
-            if (process.env.NODE_ENV !== 'production') {
-              console.error('Failed to generate preview for file', file, err) // eslint-disable-line no-console
-            }
-          }
+          file.preview = window.URL.createObjectURL(file) // eslint-disable-line no-param-reassign
         }
 
         if (
@@ -221,7 +221,7 @@ class Dropzone extends React.Component {
         rejectedFiles.push(...acceptedFiles.splice(0))
       }
 
-      if (isFileList(fileList) && onDrop) {
+      if (onDrop) {
         onDrop.call(this, acceptedFiles, rejectedFiles, evt)
       }
 

diff --git a/src/index.spec.js b/src/index.spec.js
@@ -4,7 +4,7 @@
 import React from 'react'
 import { mount, render } from 'enzyme'
 import { fromEvent } from 'file-selector'
-import { onDocumentDragOver } from './utils'
+import * as utils from './utils'
 
 const flushPromises = wrapper =>
   new Promise(resolve =>
@@ -155,7 +155,7 @@ describe('Dropzone', () => {
         </Dropzone>
       )
 
-      onDocumentDragOver(event)
+      utils.onDocumentDragOver(event)
       expect(event.preventDefault).toHaveBeenCalledTimes(1)
       event.preventDefault.mockClear()
 
@@ -911,6 +911,23 @@ describe('Dropzone', () => {
       expect(onDropAccepted).toHaveBeenCalledWith(files.concat(images), expectedEvent)
       expect(onDropRejected).not.toHaveBeenCalled()
     })
+
+    it('should not call onDrop* callbacks in Edge for non-File items', async () => {
+      utils.isIeOrEdge = jest.fn(() => false).mockImplementationOnce(() => true)
+      const dropzone = mount(
+        <Dropzone
+          onDrop={onDrop}
+          onDropAccepted={onDropAccepted}
+          onDropRejected={onDropRejected}
+          accept="image/*"
+        />
+      )
+
+      await dropzone.simulate('drop', { dataTransfer: { files, items: nonFileItems } })
+      expect(onDrop).not.toHaveBeenCalledWith()
+      expect(onDropAccepted).not.toHaveBeenCalledWith()
+      expect(onDropRejected).not.toHaveBeenCalledWith()
+    })
   })
 
   describe('preview', () => {
@@ -938,15 +955,12 @@ describe('Dropzone', () => {
       )
     })
 
-    it('should not throw error when preview cannot be created', async () => {
+    it('should not generate previews for non-File items', async () => {
       const onDrop = jest.fn()
-      const onConsoleError = jest.fn()
-      jest.spyOn(console, 'error').mockImplementationOnce(onConsoleError)
 
       const dropzone = mount(<Dropzone onDrop={onDrop} />)
       await dropzone.simulate('drop', { dataTransfer: { files: ['bad_val'] } })
 
-      expect(onConsoleError).toHaveBeenCalled()
       expect(onDrop).not.toHaveBeenCalledWith(
         expect.arrayContaining([expect.objectContaining({ preview: expect.anything() })]),
         [],