Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React onDrop is not firing

Below is the sample code which I'm trying to use, which is react + TypeScript. onDragEnter and onDragOver are working properly but not the onDrop event.

import * as React from 'react';

export class FileZone extends React.Component {

  onDragOver = (e) => {
    let event = e as Event;
    event.stopPropagation();
  }

  onDragEnter = (e) => {
    let event = e as Event;
    event.stopPropagation();
  }

  onFileDrop = (e) => {
    let event = e as Event;
    event.stopPropagation();

    console.log("onFileDrop");
    alert("dropped")
  }

  render() {
    return (
      <div
        onDragEnter={this.onDragEnter}
        onDragOver={this.onDragOver}
        onDrop={this.onFileDrop}>
        Drag and drop file here
      </div>)
  }
}
like image 970
Prasob Avatar asked May 08 '18 09:05

Prasob


3 Answers

Finally i got the issue, for some reason i have to handle the onDragOver like this :

onDragOver = (e) => {
let event = e as Event;
event.stopPropagation();
event.preventDefault();
}

this solved my issue.

like image 50
Prasob Avatar answered Nov 10 '22 08:11

Prasob


Simply prevent default ondragover event then it works.

onDragOver = (event) => {
    event.preventDefault();
}

return (<div onDragOver={this.onDragOver} {...others}>{children}</div>);
like image 40
JamesYin Avatar answered Nov 10 '22 09:11

JamesYin


There is a problem in your code you have to assign event to div

render() {
    return (
      <div //you have to remove additional > from here
        onDragEnter={this.onDragEnter}
        onDragOver={this.onDragOver}
        onDrop={this.onFileDrop}>
        Drag and drop file here
      </div>
    )
  }
like image 5
Piyush Bhati Avatar answered Nov 10 '22 09:11

Piyush Bhati