trigger react dropzone with ref doesn't work

Question

I'm implementing this library : https://github.com/felixrieseberg/React-Dropzone-Component

To trigger another component or element programmatically I can use ref but I got an error of photoUploadDropAreaElement is not a function using below code.

triggerUploadDialog(){
    this.photoUploadDropAreaElement.click(); // doesn't work?

    console.log(this.photoUploadDropAreaElement);
}

render() {
return(
        <div onClick={this.triggerUploadDialog.bind(this)}>
            <DropzoneComponent ref={dropArea => this.photoUploadDropAreaElement = dropArea} />
        </div>
);

The result of DropzoneComponent look like this

What's wrong here? I just want to trigger a click to open the file dialog for user to select file to upload.

Answer 1

I'm using import * as Dropzone from 'react-dropzone'; via npm install react-dropzone --save-dev . Go here for the details.

This dropzone package allows you to, by default, click on the UI's dropzone to open the file dialog for user to select a file to upload.

Here is the code I used, which includes a 'Choose File' button as well as a 'Delete' button. *Note: multiple={false} disables the user's ability to choose multiple files. You can simply change it to true and the multiple file selection will be enabled.

import * as React from 'react';
import * as Dropzone from 'react-dropzone';

export interface FileUploadState { file: Array<File> }

export class FileUpload extends React.Component<{}, FileUploadState> {
    constructor(props: any) {
        super(props);
        this.state = {
            file: []
        }
    }

    onDrop(droppedFile: any) {
        if (droppedFile && droppedFile.preview) {
            window.URL.revokeObjectURL(droppedFile.preview);
        }
        this.setState({
            file: droppedFile
        });
        console.log(droppedFile);
    }

    onDelete() {
        this.setState({
            file: []
        });
    }

    render() {
        let dropzoneRef: any;
        return (
            <div>
                <div>
                    <Dropzone ref={(node) => { dropzoneRef = node; }} onDrop={this.onDrop.bind(this)} multiple={false}>
                        <div className="text-center">Drag and drop your file here, or click here to select file to upload.</div>
                    </Dropzone>
                    <button type="button" className="button primary" onClick={(e) => {
                        e.preventDefault(); // --> without this onClick fires 3 times
                        dropzoneRef.open();
                    }}>
                        Choose File(s)
                    </button>
                    <button type="button" className="button alert" onClick={this.onDelete.bind(this)}>
                        Delete
                    </button>
                </div>
                <hr />
                <div>
                    <h2>File(s) to be uploaded: {this.state.file.length} </h2>
                    <ul>
                        {
                            this.state.file.map(f => <li><code>{f.name}</code></li>)
                        }
                    </ul>
                </div>
            </div>

        )
    }
}

Answer 2

Try like this. It's work for me

triggerUploadDialog () {
    this.photoUploadDropAreaElement.dropzone.element.click()
  }

Component

<div onClick={this.triggerUploadDialog.bind(this)}>
 <DropzoneComponent ref={dropArea => this.photoUploadDropAreaElement = dropArea} />
</div>

Answer 3

For anyone still looking, it looks like the library was updated to expose an open function.

https://github.com/react-dropzone/react-dropzone/commit/773eb660c7848dd1d67e6e13c7f7261eaaa9fd4d

You can use it this way via refs:

dropzoneRef: any;

onClickPickImage = () => {
  if (this.dropzoneRef) {
    this.dropzoneRef.open();
  }
};

// When rendering your component, save a ref

<Dropzone
  ref={(ref: any) => {
    this.dropzoneRef = ref;
  }}
  onDrop={this.onDrop}
>
  <div onClick={this.onClickPickImage}>Trigger manually</div>
</Dropzone>

Answer 4

My problem was NOT including the input element. When I did, it worked.