How to trigger the open function for react-dropzone-component using refs?

Question

I am using the react drop-zone component to upload files to the server.

I would like to call the drop-zone open function on button click.

This is what I have tried so far:

I am using refs to reference the drop zone. Also note I have multiple drop-zone's

<DropzoneComponent
  style={{ height: 80 }}
  ref={this.myRef}
  config={config}
  eventHandlers={eventHandlers}
  djsConfig={djsConfig}
  />

And on a separate button click I am calling a function

  openDropZone1 = () => {
    this.refs.myRef.open();
    this.setState({
      bankStatement1: true,
      bankStatement2: false,
      bankStatement3: false
    });
  };

On click of the button I get the following error:-

TypeError: Cannot read property 'open' of undefined on this line this.refs.myRef.open();

Any help or suggestion is most appreciated.

Thank you.

Answer 1

https://github.com/react-dropzone/react-dropzone/tree/master/examples/FileDialog

this is the final answer because it's in the docs if this doesn't solve your problem then it is something wrong with your code