onDocumentDrop causes an error in IE

[Sergey901509]

On first drop - all is Ok.
When I drop file second time without page refresh in Internet Explorer 11 - 2 requests are sent: one with an empty file, the second with a normal file.

[rxmarbles]

@Sergey901509 can you provide an example of the code you are using to duplicate this issue? also provide the version you are running as well?

[Sergey901509]

of cource:

<Dropzone
onDrop={files => this._onDrop(files)}
multiple={true}
className={styles.dropzone}
activeClassName={styles.over}
>

_onDrop(files) {
try {
if (files.length !== 1)
throw new Error('Need to update only 1 file'); <-- here is error. files.length equals 0 when I upload only 1 file
/******/
}

[aganglada]

I've already try your case in IE 11 and it seems like redirecting to the file itself, is that alright? https://react-dropzone.stackblitz.io/ seems like onDragOver is not really making any effect in IE 11

[janusch]

Hey,
I had a similar issue with drag'n'dropping a file in IE11.

It turns out that this.node in index.js is null at the time of the drop in IE11.

Adding a simple check to the onDocumentDrop method fixes it.

onDocumentDrop(evt) {
    if (this.node && this.node.contains(evt.target)) {
      // if we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
      return
    }
    evt.preventDefault()
    this.dragTargets = []
}

Can someone with more knowledge of react-dropzone tell if this is a legit PR?

Cheers

[okonet]

@janusch this looks good to me. Please create a PR and try to add tests for this case please.

[janusch]

Hey, thank you for the swift reply.
I'll have to investigate this a bit further. I could not re-create the bug with the official examples. So it must be a special case, maybe due to filetype, or something else? I'll try to create a test-case for it.

[seberik]

I encountered this issue to when using it with react dnd. It seems the issue occurs when adding and removing a dropzone from the dom immediately after a user drops a file.

[janusch]

@seberik that was as well my impression. Probably due to the use of refs. In that case I do not think this is a fault of react-dropzone, and should rather be fixed by keeping the component in the dom, where they are used.

Please correct me if I am wrong ;)

[AlexHramovich]

hello
when do you plan to close this issue?

[pcgilday]

@okonet and @janusch I opened #517 to add the check that was suggested. I can't consistently reproduce the issue either, but when I did encounter it I came to the same solution of adding this check to make sure the ref actually exists.

[AlexHramovich]

@pcgilday
thanks for your reply

[aliciacatalina]

I think this issue is still present, I'm running v4.2.1 and testing in Sauce Labs with IE11 Win 10 causes the same result of firing 2 requests : "one with an empty file, the second with a normal file."

[rxmarbles]

@aliciacatalina the fix for this issue is in v4.2.3. Can you upgrade your version and try again?

[taikn]

This issue is still present for me on v4.2.13 IE11 ( Windows 10 )