saleor-dashboard/src/components/ImageUpload/ImageUpload.tsx

import {
  createStyles,
  Theme,
  withStyles,
  WithStyles
} from "@material-ui/core/styles";
import { fade } from "@material-ui/core/styles/colorManipulator";
import Typography from "@material-ui/core/Typography";
import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
import ImageIcon from "../../icons/Image";
import Dropzone from "../Dropzone";

interface ImageUploadProps {
  children?: (props: { isDragActive: boolean }) => React.ReactNode;
  className?: string;
  disableClick?: boolean;
  isActiveClassName?: string;
  iconContainerClassName?: string;
  iconContainerActiveClassName?: string;
  onImageUpload: (file: File) => void;
}

const styles = theme =>
  createStyles({
    containerDragActive: {
      background: fade(theme.palette.primary.main, 0.1),
      color: theme.palette.primary.main
    },
    fileField: {
      display: "none"
    },
    imageContainer: {
      background: "#ffffff",
      border: "1px solid #eaeaea",
      borderRadius: theme.spacing(),
      height: 148,
      justifySelf: "start",
      overflow: "hidden",
      padding: theme.spacing(2),
      position: "relative",
      transition: theme.transitions.duration.standard + "s",
      width: 148
    },
    photosIcon: {
      height: "64px",
      margin: "0 auto",
      width: "64px"
    },
    photosIconContainer: {
      padding: theme.spacing(5, 0),
      textAlign: "center"
    },
    uploadText: {
      color: theme.typography.body1.color,
      fontSize: 12,
      fontWeight: 600,
      textTransform: "uppercase"
    }
  });

export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
  ({
    children,
    classes,
    className,
    disableClick,
    isActiveClassName,
    iconContainerActiveClassName,
    iconContainerClassName,
    onImageUpload
  }: ImageUploadProps & WithStyles<typeof styles>) => (
    <Dropzone
      disableClick={disableClick}
      onDrop={files => onImageUpload(files[0])}
    >
      {({ isDragActive, getInputProps, getRootProps }) => (
        <>
          <div
            {...getRootProps()}
            className={classNames({
              [classes.photosIconContainer]: true,
              [classes.containerDragActive]: isDragActive,
              [className]: !!className,
              [isActiveClassName]: !!isActiveClassName && isDragActive
            })}
          >
            <div
              className={classNames({
                [iconContainerClassName]: !!iconContainerClassName,
                [iconContainerActiveClassName]:
                  !!iconContainerActiveClassName && isDragActive
              })}
            >
              <input {...getInputProps()} className={classes.fileField} />
              <ImageIcon className={classes.photosIcon} />
              <Typography className={classes.uploadText}>
                <FormattedMessage
                  defaultMessage="Drop here to upload"
                  description="image upload"
                />
              </Typography>
            </div>
          </div>
          {children && children({ isDragActive })}
        </>
      )}
    </Dropzone>
  )
);
ImageUpload.displayName = "ImageUpload";
export default ImageUpload;