react-standalone-form-mui/lib/MultiImageUpload.js

The Material UI suite for react-standalone-form library.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));

var _CloudUpload = _interopRequireDefault(require("@material-ui/icons/CloudUpload"));

var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));

var _classnames = _interopRequireDefault(require("classnames"));

var _FormControl = _interopRequireDefault(require("./FormControl"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const MultiImageUpload = _ref => {
  let {
    name,
    value,
    required,
    setValue,
    spacing,
    columns,
    uploadLabel
  } = _ref;
  const classes = useStyles();
  return /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    spacing: spacing
  }, value && value.map((item, index) => /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    sm: 12 / columns,
    key: index
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    alignItems: "center",
    justify: "center",
    className: classes.wrapper
  }, /*#__PURE__*/_react.default.createElement("img", {
    src: item.data || item,
    className: classes.image,
    alt: "Uploaded file ".concat(index)
  }), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    className: classes.delete,
    onClick: () => setValue(name, value.filter((subItem, subIndex) => subIndex !== index), required)
  }, /*#__PURE__*/_react.default.createElement(_Delete.default, {
    fontSize: "small"
  }))))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    sm: 12 / columns
  }, /*#__PURE__*/_react.default.createElement("input", {
    accept: "image/*",
    className: classes.input,
    id: name,
    multiple: true,
    type: "file",
    onChange: e => {
      let oldValue = value || [];
      Object.values(e.target.files).forEach(async value => {
        const fileReader = new FileReader();
        const {
          name: fileName,
          type: fileType
        } = value;
        const dataFile = value;
        await fileReader.readAsDataURL(value);

        fileReader.onload = () => {
          const data = fileReader.result;
          setValue(name, [...oldValue, {
            fileName,
            type: fileType.split('/')[0],
            data,
            dataFile
          }], required);
          oldValue = [...oldValue, {
            fileName,
            type: fileType.split('/')[0],
            data,
            dataFile
          }];
        };
      });
    }
  }), /*#__PURE__*/_react.default.createElement("label", {
    htmlFor: name,
    className: (0, _classnames.default)(classes.wrapper, classes.label)
  }, /*#__PURE__*/_react.default.createElement(_CloudUpload.default, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "caption",
    color: "inherit"
  }, uploadLabel))));
};

MultiImageUpload.defaultProps = {
  spacing: 2,
  columns: 2,
  smHeight: '20vw',
  mdHeight: '12vw',
  uploadLabel: 'Upload'
};

var _default = (0, _withStyles.default)(theme => ({
  wrapper: {
    backgroundColor: theme.palette.grey[100],
    padding: theme.spacing(2),
    height: '33vw',
    position: 'relative',
    [theme.breakpoints.up('sm')]: {
      height: props => props.smHeight
    },
    [theme.breakpoints.up('md')]: {
      height: props => props.mdHeight,
      maxHeight: theme.spacing(30)
    }
  },
  image: {
    maxWidth: '100%',
    maxHeight: '100%'
  },
  input: {
    display: 'none'
  },
  label: {
    display: 'flex',
    flexDirection: 'column',
    cursor: 'pointer',
    alignItems: 'center',
    justifyContent: 'center',
    color: theme.palette.grey[500],
    '&:hover': {
      backgroundColor: theme.palette.grey[200]
    }
  },
  delete: {
    position: 'absolute',
    top: 0,
    right: 0
  }
}))((0, _FormControl.default)(MultiImageUpload));

exports.default = _default;