imageFolder

gistfile1.js

import React, { Component, Fragment } from "react"
import Dropzone from "react-dropzone"
import { withStyles } from "@material-ui/core/styles"
import UploadDialog from "./Dialog"

const styles = theme => ({
  dropzoneAccept: {
    borderColor: theme.palette.primary.main,
    backgroundColor: `${theme.palette.primary.main}09`
  },
  dropzoneReject: {
    borderColor: theme.palette.error.main,
    backgroundColor: `${theme.palette.error.main}09`
  }
})

class UploadDropzone extends Component {
  state = {
    open: false,
    droppedFiles: null,
    dialogInstance: 0
  }

  onDrop = files => {
    if (files && files.length) {
      this.setState({
        open: true,
        droppedFiles: files,
        dialogInstance: this.state.dialogInstance + 1
      })
    }
  }

  closeDialog = () => {
    this.setState({ open: false })
  }

  onExited = () => {
    this.state.droppedFiles.forEach(({ preview }) => {
      URL.revokeObjectURL(preview)
    })

    this.setState({
      droppedFiles: null
    })
  }

  render() {
    const { open, droppedFiles, dialogInstance } = this.state
    const { imageFolderId, children, onImageUpload, classes } = this.props

    return (
      <Fragment>
        <Dropzone
          data-test="dropzone"
          disableClick
          accept="image/*"
          multiple
          onDrop={this.onDrop}
          acceptClassName={classes.dropzoneAccept}
          rejectClassName={classes.dropzoneReject}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            display: "flex"
          }}
        >
          {children}
        </Dropzone>
        <UploadDialog
          data-test="dialog"
          key={
            dialogInstance
            /*
             * If we change the key here we don't need to
             * deal with props changing on the UploadDialog
             * and its children because we will have a new
             * instance every time new files are dropped
             */
          }
          open={open}
          droppedFiles={droppedFiles}
          imageFolderId={imageFolderId}
          onCancel={this.closeDialog}
          onImageUpload={onImageUpload}
          onAllImagesUpload={this.closeDialog}
          onExited={this.onExited}
        />
      </Fragment>
    )
  }
}

export default withStyles(styles)(UploadDropzone)