Drag and drop images in React

Question

I'm trying to implement drag and drop behaviour using React JS and react-dropzone library with showing thumbnails.

The code is as follows:

import React from "react";
import ReactDOM from "react-dom";
import Dropzone from "react-dropzone";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      dropzone1: [],
      dropzone2: []
    };
  }

  addFilesToDropzone(files, dropzone) {
    let files_with_preview = [];
    files.map(file => {
      file["preview"] = URL.createObjectURL(file);
      files_with_preview.push(file);
    });

    const new_files = [...this.state[dropzone], ...files_with_preview];
    this.setState({ [dropzone]: new_files });
  }

  render() {

    return (
      <div className="App">
        <Dropzone
          onDrop={files => {
            this.addFilesToDropzone(files, "dropzone1");
          }}
        >
          {({ getRootProps, getInputProps }) => (
            <div {...getRootProps()} className="">
              <input {...getInputProps()} />
              <div style={{ height: 100, backgroundColor: "yellow" }}>
                Drop some files here
                {dropzone1.map(file => (
                  <img
                    src={file.preview}
                    alt={file.path}
                    style={{ width: 40, height: 40 }}
                  />
                ))}
              </div>
            </div>
          )}
        </Dropzone>

        <div style={{ display: "flex", flexDirection: "row", marginTop: 25 }}>
          <div style={{ width: "100%" }}>
            DROPZONE 2
            <Dropzone
              onDrop={files => {
                this.addFilesToDropzone(files, "dropzone2");
              }}
            >
              {({ getRootProps, getInputProps }) => (
                <div {...getRootProps()} className="">
                  <input {...getInputProps()} />
                  <div style={{ height: 100, backgroundColor: "yellow" }}>
                    Drop some files here
                    {this.state.dropzone2.map(file => (
                      <img
                        src={file.preview}
                        alt="dsds"
                        style={{ width: 40, height: 40 }}
                      />
                    ))}
                  </div>
                </div>
              )}
            </Dropzone>
          </div>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is the example on codesandbox.

Everything works fine when I drag files from a folder on my computer, but I want to be able to drag thumbnails generated with dropzone 1 to a dropzone 2. But that doesn't work.

Any idea how to do that?

this is what I get when I open your example code `ReferenceError dropzone1 is not defined` — codeVerine, Jun 17 '19 at 12:52
As Avin Kavish said, use `react-dnd` or `react-beautiful-dnd` instead of this library to achieve what you need to do. This library cannot do that. Though if you have just 2 dropzones you can implement moving image from one dropzone to another by clicking on the image (instead of dragging), by writing some additional code — codeVerine, Jun 17 '19 at 13:01
@codeVerine Check my question [here](https://stackoverflow.com/questions/56643338/how-to-implement-drag-and-drop-behaviour-in-react) — Boky, Jun 18 '19 at 07:01

score 1 · Answer 1 · answered Jun 17 '19 at 12:40

1

Yes, that doesn't work because that's not what react-dropzone is designed for. Quote from the website,

Simple React hook to create a HTML5-compliant drag'n'drop zone for files.

Use react-dnd or react-beautiful-dnd instead.

answered Jun 17 '19 at 12:40

Avin Kavish

8,317
1
21
36

Check my question [here](https://stackoverflow.com/questions/56643338/how-to-implement-drag-and-drop-behaviour-in-react) – Boky Jun 18 '19 at 07:01

score 0 · Answer 2 · answered Jun 17 '19 at 12:48

0

You can use another package: react-file-drop

answered Jun 17 '19 at 12:48

Bhawana

372
1
6

Drag and drop images in React

2 Answers2