Suggestion: Option to prevent dragging and dropping elements on the page onto the dropzone

[akinnee-gl]

In the meantime, here is my solution for doing this:

onDragEnter={function( event ) {
    const dt = event.dataTransfer;
    if ( !(
        dt.types &&
        ( dt.types.indexOf ? dt.types.indexOf( "Files" ) !== -1 : dt.types.contains( "Files" ) )
    ) ) {
        this.setState( { isDragActive: false } );
    }
}}

onDrop={files => {
    if ( files.length === 0 ) {
        return;
    }

    // handle files dropped here
}}

[okonet]

I like the approach! Shouldn't we always check if we are dealing with files and do nothing if not?

[akinnee-gl]

Yes, the main issue is that if you drag a link or image from elsewhere on the page over the dropzone, the dragover class is still added, which is confusing to the user.

[jochenberger]

And probably, onDrop should not be called with an empty files array in that case.

[okonet]

Makes sense. Can this be made into a PR with tests etc?

[okonet]

Any news on this one? Also, can we check if it also works with files from download bar of the Chrome?

[ps-aux]

Any news on this ? Facing the same problem.

[jochenberger]

As of 76abf26, you have to disablePreview or you'll get the TypeError mentioned in #162.

[okonet]

One of the solutions to avoid the exception would be wrapping it in try ... catch block I guess.

[jochenberger]

I'd rather fix the underlying issue. Can't we just check if file.kind === 'file'? See https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/kind

[okonet]

It won't work in IE and Safari :/