Reputation: 12084

Drag and drop images in React

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?

Upvotes: 2