react-standalone-form-mui/lib/MediaUpload.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 _Button = _interopRequireDefault(require("@material-ui/core/Button"));

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

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

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

var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));

var _Movie = _interopRequireDefault(require("@material-ui/icons/Movie"));

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

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

const MediaUpload = _ref => {
  let {
    name,
    type,
    value,
    required,
    setValue,
    classes
  } = _ref;
  return !value ? /*#__PURE__*/_react.default.createElement("div", {
    className: classes.imageUploadWrapper
  }, /*#__PURE__*/_react.default.createElement("input", {
    accept: "".concat(type === 'media' ? 'video/*,' : '', "image/*"),
    className: classes.imageUpload,
    id: name,
    type: "file",
    onChange: e => {
      const fileReader = new FileReader();
      const {
        name: fileName,
        type: fileType
      } = e.target.files[0];
      const dataFile = e.target.files[0];
      fileReader.readAsDataURL(e.target.files[0]);

      fileReader.onload = () => {
        const data = fileReader.result;
        setValue(name, {
          fileName,
          type: fileType.split('/')[0],
          data,
          dataFile
        }, required, {
          type
        });
      };
    }
  }), /*#__PURE__*/_react.default.createElement("label", {
    htmlFor: name,
    className: classes.imageUploadLabel
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    component: "span",
    size: "small"
  }, /*#__PURE__*/_react.default.createElement(_CloudUpload.default, null), "\xA0Upload image", type === 'media' && ' or video'))) : /*#__PURE__*/_react.default.createElement("div", {
    className: classes.imageUploadWrapper
  }, typeof value === 'string' || value.type === 'image' ? /*#__PURE__*/_react.default.createElement("img", {
    src: typeof value === 'string' && value.includes('http') ? value : value.data,
    className: classes.imageUploadImage,
    alt: "Uploaded file"
  }) : /*#__PURE__*/_react.default.createElement(_Movie.default, {
    className: classes.imageUploadIcon
  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "caption",
    gutterBottom: true
  }, value.name), /*#__PURE__*/_react.default.createElement(_Button.default, {
    component: "span",
    size: "small",
    onClick: () => setValue(name, '', required, {
      type
    })
  }, /*#__PURE__*/_react.default.createElement(_Clear.default, null), "\xA0Delete ", value.type));
};

MediaUpload.defaultProps = {
  type: 'image'
};

var _default = (0, _withStyles.default)(theme => ({
  imageUploadWrapper: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: theme.spacing(4),
    paddingBottom: theme.spacing(3),
    backgroundColor: theme.palette.grey[100],
    marginTop: theme.spacing(8),
    maxWidth: 300
  },
  imageUpload: {
    display: 'none'
  },
  imageUploadImage: {
    backgroundColor: theme.palette.common.white,
    padding: theme.spacing(1),
    marginBottom: theme.spacing(1),
    maxWidth: '100%'
  },
  imageUploadIcon: {
    fontSize: theme.spacing(10),
    color: theme.palette.grey[400]
  }
}))((0, _FormControl.default)(MediaUpload));

exports.default = _default;