Conflict mouse over with some elements and components

[Deleted user]

I have a DropzoneJs component on a page on which you can click and choose some files for upload
Also I have wrapped page with react-file-drop. When I drag files over the page, some elements listen to mouse events, and if I drag files over DropzoneJs and then move mouse without dropping files to other part of page, react-file-drop will stop adding class .file-drop-dragging-over-target

[Kabir Sarin]

react-file-drop works by counting dragover/leave events. If any component interferes with these (by calling preventDefault, perhaps?) there will be side effects. Presumably dropzonejs does something similar as well. I don't think these two libs will play nicely together. What are you trying to achieve where you need them both?

[Deleted user]

I want to make all page to behave like an are for dropping files, but also have a regular clickable dropzone. You can see something similar on jira, when you create an issue, you can upload attachments by dropping them into dialog or by clicking on dropzone

[Deleted user]

Maybe you could add some prop to make your event listeners using capture phase for events?

[Kabir Sarin]

@SergeyShablenko this can be done quite easily by wrapping the ReactFileDrop component. There should probably be a demo in the readme. Try something like this:

import React from 'react';
import ReactFileDrop from 'react-file-drop';

class MyUploader extends React.Component {
  uploadFiles = (files: FileList) => {
    console.log(files);
  }

  handleFileDrop = (files: FileList) => {
    this.uploadFiles(files);
  }

  handleClick = () => {
    if (this.fileUploaderRef) this.fileUploaderRef.click();
  }

  handleFileChange: React.FormEventHandler<HTMLInputElement> = (event) => {
    this.uploadFiles(event.currentTarget.files);
  }

  render() {
    return (
    <div onClick={this.handleClick}>
      <input type="file" ref={(ref:any) => this.fileUploaderRef = ref} style={{ display: "none" }} onChange={this.handleFileChange} />
      <ReactFileDrop onDrop={this.handleFileDrop}>
        Click me or drag and drop to upload a file
      </ReactFileDrop>
    </div>
    )
  }
}

[Deleted user]

Will try