React Dropzone : need to pass id with file to upload

Question

I use React Dropzone to upload files to my Node.js server.

When a file is dropped in the dropzone, the handleOnDrop() method is called. Then another uploadPicture() method is called.

...
handleOnDrop = (files) => {
    this.uploadPicture(files);
}

render() {
    const dropzone =
        <Dropzone onDrop={this.handleOnDrop}>
            {({ getRootProps, getInputProps }) => (
                <section className="container">
                    <div {...getRootProps({ className: 'dropzone' })}>
                        <input {...getInputProps()} />
                        <p>Drag 'n' drop some files here, or click to select files</p>
                    </div>
                </section>
            )}
        </Dropzone>
}

return (
    <div>
        <h1>Dropzone test</h1>
        {dropzone}
    </div>
}
...

1. I'm surprized with file argument : it is known by the handleOnDrop() method even if I do not pass it in this line <Dropzone onDrop={this.handleOnDrop}>. I do not understand where fileis passed to the method.

2. I also do not understand the role of getRootProps, getInputProps inside the Dropzone. Maybe it is linked to the above question.

3. Finally, I would like to pass the id of the object whose I want to update the picture (the <Dropzone> will be in a array.map(item => ()) and I will be able to access the item.id).

I tried this non working code and many variants, but I'm still not able to pass item.id to the uploadPicture() method.

handleOnDrop = (id, files) => {
    this.uploadPicture(id, files);
}

<Dropzone onDrop={() => this.handleOnDrop(item.id)}>

Any help will be appreciated. Thank you.

Answer 1

Your handleDrop takes in two parameter but you are only passing in one,

You can try this instead:

<Dropzone onDropAccepted={(files) => this.handleOnDrop(files,item.id)}>