import { Component, InputHTMLAttributes } from 'react'; import { observer } from 'mobx-react'; import classnames from 'classnames'; import Dropzone from 'react-dropzone'; import { mdiDelete, mdiFileImage } from '@mdi/js'; import prettyBytes from 'pretty-bytes'; import { noop } from 'lodash'; import { isWindows } from '../../../environment'; import Icon from '../icon'; import { IFormField } from '../typings/generic'; interface IProps extends InputHTMLAttributes, IFormField { className: string; multiple: boolean; textDelete: string; textUpload: string; textMaxFileSize: string; textMaxFileSizeError: string; maxSize?: number; maxFiles?: number; messages: any; set?: (value: string) => void; } interface IState { path: string | null; errorState: boolean; errorMessage: { message: string }; } // TODO - drag and drop image for recipe add/edit not working from 6.2.0 need to look at it @observer class ImageUpload extends Component { constructor(props: IProps) { super(props); this.state = { path: null, errorState: false, errorMessage: { message: '', }, }; } onDropAccepted(acceptedFiles): void { const { onDrop = noop, set = noop } = this.props; this.setState({ errorState: false }); for (const file of acceptedFiles) { const imgPath: string = isWindows ? file.path.replace(/\\/g, '/') : file.path; this.setState({ path: imgPath }); onDrop(file); } set(''); } onDropRejected(rejectedFiles): void { for (const file of rejectedFiles) { for (const error of file.errors) { if (error.code === 'file-too-large') { this.setState({ errorState: true }); this.setState({ errorMessage: { message: this.props.textMaxFileSizeError, }, }); } } } } render() { const { className, multiple = false, textDelete, textUpload, textMaxFileSize, value, maxSize = Number.POSITIVE_INFINITY, maxFiles = 0, label = '', set = noop, } = this.props; const cssClasses = classnames({ 'image-upload__dropzone': true, [`${className}`]: className, }); const maxSizeParse: number = maxSize === undefined || maxSize === Number.POSITIVE_INFINITY ? 0 : maxSize; return ( {label} {(value && value !== 'delete') || this.state.path ? ( <> { if (value) { set('delete'); } else { this.setState({ path: null }); } }} > {textDelete} > ) : ( {({ getRootProps, getInputProps }) => ( {textUpload} )} )} {maxSizeParse !== 0 && ( {textMaxFileSize}{' '} {prettyBytes(maxSizeParse, { maximumFractionDigits: 1 })} )} {this.state.errorState && ( {this.state.errorMessage.message} )} ); } } export default ImageUpload;
{textDelete}
{textUpload}