1 files changed, 167 insertions, 0 deletions

diff --git a/src/components/ui/imageUpload/index.tsx b/src/components/ui/imageUpload/index.tsx
new file mode 100644
index 000000000..7a2ca747f
--- /dev/null
+++ b/src/components/ui/imageUpload/index.tsx
@@ -0,0 +1,167 @@
+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<HTMLInputElement>, 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<IProps, IState> {
+  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 (
+      <div className="image-upload-wrapper">
+        <label className="franz-form__label" htmlFor="iconUpload">
+          {label}
+        </label>
+        <div className="image-upload">
+          {(value && value !== 'delete') || this.state.path ? (
+            <>
+              <div
+                className="image-upload__preview"
+                style={{
+                  backgroundImage: `url("${this.state.path || value}")`,
+                }}
+              />
+              <div className="image-upload__action">
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (value) {
+                      set('delete');
+                    } else {
+                      this.setState({ path: null });
+                    }
+                  }}
+                >
+                  <Icon icon={mdiDelete} />
+                  <p>{textDelete}</p>
+                </button>
+                <div className="image-upload__action-background" />
+              </div>
+            </>
+          ) : (
+            <Dropzone
+              onDropAccepted={this.onDropAccepted.bind(this)}
+              onDropRejected={this.onDropRejected.bind(this)}
+              multiple={multiple}
+              accept="image/jpeg, image/png, image/svg+xml"
+              minSize={0}
+              maxSize={maxSize}
+              maxFiles={maxFiles}
+            >
+              {({ getRootProps, getInputProps }) => (
+                <div {...getRootProps()} className={cssClasses}>
+                  <Icon icon={mdiFileImage} />
+                  <p>{textUpload}</p>
+                  <input {...getInputProps()} />
+                </div>
+              )}
+            </Dropzone>
+          )}
+        </div>
+        {maxSizeParse !== 0 && (
+          <span className="image-upload-wrapper__file-size">
+            {textMaxFileSize}{' '}
+            {prettyBytes(maxSizeParse, { maximumFractionDigits: 1 })}
+          </span>
+        )}
+        {this.state.errorState && (
+          <span className="image-upload-wrapper__file-size-error">
+            {this.state.errorMessage.message}
+          </span>
+        )}
+      </div>
+    );
+  }
+}
+
+export default ImageUpload;