640187-react-dropzone

withDropzone.js

import React, { createRef } from "react";
import Dropzone from "react-dropzone";

const dropzoneStyle = {
  width: "200px",
  height: "200px",
  background: "red",
  borderWidth: 2,
  borderColor: "rgb(102, 102, 102)",
  borderStyle: "dashed",
  borderRadius: 5,
};

withAttacher.propTypes = {}; // nothing is descending

export default function withAttacher(Component) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.dropzoneRef = createRef();
    }

    render() {
      return (
        <Dropzone style={dropzoneStyle} ref={this.dropzoneRef} multiple={false}>
          {({ getInputProps }) => (
            <React.Fragment>
              <input {...getInputProps()} />
              <Component
                {...this.props}
                handleClick={() => {
                  this.dropzoneRef.current.open();
                }}
              />
            </React.Fragment>
          )}
        </Dropzone>
      );
    }
  };
}