creating a list with react-dropzone

Question

I'm trying to create a gallery using react-dropzone. I am successfully adding images but instead of creating an array, as I thought I was doing by following their github, it is simply loading an image and replacing it with the new one when I drag another image. The expected result is to add the image next to the one I already dragged in it.

I am specifying an empty array called files: [], that I imagine will collect the images.

The dropzone element in my class looks like this:

 let dropzoneRef;

 <Dropzone
    ref={
        (node) => {
            dropzoneRef = node;
        }
    }
    onDrop={this.onDrop.bind(this)}>
    <p>Drop files here.</p>
 </Dropzone>
 <RaisedButton
    label="Upload File"
    primary={false}
    className="primary-button"
    onClick={() => { dropzoneRef.open(); }}
  />

  <ul>
     {
        this.state.files.map(f =>
            <li key={f.preview}>
                <img className="dropped-image" src={f.preview} alt=""/>
            </li>,
        )
     }
  </ul>

I added the working code to a WebpackBin for you to inspect

Their github docs are here

This is my goal screen. I haven't worked out the second part which is clicking on any single thumbnail added and showing it in full size. So don't worry about that part. I just need to be able to collect a list and add as many as I want. Here is a screenshot of the expected result. (I apologize for the kindergarten writing)

Thank you in advance

Deividas · Accepted Answer · 2017-06-25 14:40:34Z

2

All you need to do is update your onDrop function as follows

onDrop(uploadedFile) {
    this.setState({
        files: this.state.files.concat(uploadedFile),
    });
}

This is because you want to add the new file to this.state.files array.

See this updated WebpackBin.

answered Jun 25, 2017 at 14:40

Deividas

6,5172 gold badges30 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

creating a list with react-dropzone

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related