@e-group/material-lab/esm/FileUploadDropzone/FileUploadDropzone.js

EGroup Team Lab - Incubator for EGroup Team experimental React components.

import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import { useDropzone } from 'react-dropzone';
import { Typography, CircularProgress, withStyles, createStyles } from '@material-ui/core';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import clsx from 'clsx';

const styles = theme => createStyles({
  // https://jsfiddle.net/prafuitu/vmL0ys1u/
  root: {
    '--border-color': theme.palette.text.secondary,
    '--border-weight': '2px',
    '--dash-size': '8px',
    '--gap-size': '8px',
    position: 'relative',
    width: '100%',
    height: '100%',
    minHeight: 200,
    outline: 'none',
    cursor: props => props.uploading ? 'auto' : 'pointer',
    '&::after': {
      content: '""',
      transition: 'all .6s ease',
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      background: "\n        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top left no-repeat,\n        linear-gradient(90deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) top center repeat-x,\n        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) top right no-repeat,\n        \n        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top left no-repeat,\n        linear-gradient(0deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) center left repeat-y,\n        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,\n        \n        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom left no-repeat,\n        linear-gradient(90deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) bottom center repeat-x,\n        linear-gradient(90deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat,\n        \n        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) top right no-repeat,\n        linear-gradient(0deg, transparent calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2), var(--border-color) calc(var(--gap-size) / 2 + var(--dash-size)), transparent calc(var(--gap-size) / 2 + var(--dash-size))) center right repeat-y,\n        linear-gradient(0deg, var(--border-color) 100%, transparent 100%) bottom right no-repeat;\n        background-size: var(--dash-size) var(--border-weight), calc(var(--dash-size) + var(--gap-size)) var(--border-weight), var(--dash-size) var(--border-weight), var(--border-weight) var(--dash-size), var(--border-weight) calc(var(--dash-size) + var(--gap-size)), var(--border-weight) var(--dash-size)"
    }
  },
  dragActive: {
    '--border-color': theme.palette.text.primary,
    backgroundColor: theme.palette.background.default
  },
  center: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -50%)',
    zIndex: 1
  },
  icon: {
    fontSize: 40,
    marginBottom: theme.spacing(2)
  }
});

const FileUploadDropzone = ({
  classes,
  onDrop: onDropProp,
  uploading,
  accept,
  multiple = false,
  completed,
  inputRef
}) => {
  const _useDropzone = useDropzone({
    onDrop: onDropProp,
    accept,
    disabled: uploading
  }),
        getRootProps = _useDropzone.getRootProps,
        getInputProps = _useDropzone.getInputProps,
        isDragActive = _useDropzone.isDragActive,
        acceptedFiles = _useDropzone.acceptedFiles;

  const renderContent = () => {
    if (uploading) {
      const msg = acceptedFiles.length > 1 ? "".concat(acceptedFiles[0].name, " \u548C\u5176\u4ED6 ").concat(acceptedFiles.length - 1, " \u500B\u6A94\u6848") : acceptedFiles[0].name;
      return /*#__PURE__*/React.createElement("div", {
        className: classes.center
      }, /*#__PURE__*/React.createElement(CircularProgress, {
        variant: "determinate",
        color: "inherit",
        className: classes.icon,
        value: completed
      }), /*#__PURE__*/React.createElement(Typography, {
        align: "center",
        gutterBottom: true
      }, "\u6A94\u6848\u4E0A\u50B3\u4E2D... ", completed, "%"), /*#__PURE__*/React.createElement(Typography, {
        align: "center",
        color: "textSecondary"
      }, msg));
    }

    return /*#__PURE__*/React.createElement("div", {
      className: classes.center
    }, /*#__PURE__*/React.createElement(CloudUploadIcon, {
      color: "inherit",
      className: classes.icon
    }), /*#__PURE__*/React.createElement(Typography, {
      align: "center",
      gutterBottom: true
    }, isDragActive ? '放開檔案開始上傳' : '從這裡上傳檔案'), /*#__PURE__*/React.createElement(Typography, {
      align: "center",
      color: "textSecondary"
    }, isDragActive ? '拖移至這裡的檔案將開始上傳' : '拖移檔案至此，或點擊開始上傳'));
  };

  return /*#__PURE__*/React.createElement("div", _extends({
    className: clsx(classes.root, {
      [classes.dragActive]: isDragActive
    })
  }, getRootProps()), /*#__PURE__*/React.createElement("input", _extends({
    ref: inputRef
  }, getInputProps(), {
    multiple: multiple
  })), renderContent());
};

export default withStyles(styles, {
  name: 'EgFileUploadDropzone'
})(FileUploadDropzone);