Search code examples
javascriptreactjsmeteormeteor-react

Avoid opening file selection popup

Im previewing the images that are dragged to a dropzone, inside the dropzone. 

<Dropzone multiple={true} style={dropzoneStyle}  onDrop={this.onDrop.bind(this)} accept="image/*">
    <Preview files={this.state.files} remove={this.remove} text="Drop your images here!"/>
</Dropzone>

When you click inside the dropzone a file selection popup opens and you can also choose the images using that method. I want users to be able to remove images from the listing by clicking on a X on the top of the image. The problem is that by clicking on that icon you are also clicking on the dropzone, so the image is removed but the file selection popup opens. Any help would be appreciated!

enter image description here

Solution

  • I'm not sure if you have control over the preview components, but if you have access to the click event from clicking the "X", you should be able to call stopPropagation() on those events. For example:

    onClickRemove(e) {
  e.stopPropagation();
  // Call whatever function removes the image
}