onDrop is never called

[danielhusar]

This is how my code looks like:

  _handleFileDrop(files, event) {
    console.log(files, event);
  }

  render() {
    return (
      <div className="content">
        <FileDrop frame={document} onDrop={this._handleFileDrop}>Drop some files here!</FileDrop>
      </div>
    );
  }

css: (css from your example is not working as well)

.file-drop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.file-drop > .file-drop-target {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  transition: all 150ms linear;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.file-drop > .file-drop-target.file-drop-dragging-over-frame {
  border: 5px dashed #ccc;
  background-color: rgba(255, 255, 255, .2);
  box-shadow: none;
  z-index: 50;
  opacity: 1;
}

onDrop callback is never called even that I see the proper styling (but file-drop-dragging-over-frameclass is not added) when hovering the file over document.
I suspect its probably because it things that files was not dropped over file-drop-target however Im not sure why as it fills the 100% of its parent.

React 0.14.3

[dignifiedquire]

Seeing the same issue

[sarink]

@danielhusar @dignifiedquire
What browser/version are you guys testing with? What version of React are you using? In what ways is your code different from the working demo? http://sarink.github.io/react-file-drop/demo/

Sorry I haven't had time to look into this yet! I'm sure it's something simple.

[dignifiedquire]

@sarink It's in https://github.com/ipfs/station React is at 0.14 and it's using the latest electron

[danielhusar]

latest chrome and react 0.14

[danielhusar]

I have it pretty much the same, only maybe except es6

[JonathanWi]

Same issue here. Did you guys solved this?

[coniel]

Fixed it #6