CODEWITHSUNDEEP
reactjsdropzone.js
LOTUSMS
LOTUSMS

Reputation: 10270

creating a list with react-dropzone

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)

enter image description here

Thank you in advance

Upvotes: 1

Views: 1625

Answers (1)

Deividas
Deividas

Reputation: 6507

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.

Upvotes: 2

Related Questions