Add file size info and error message while setting a custom image in the recipe settings screen (#437)

Co-authored-by: Ricardo Cino <ricardo@cino.io>
Co-authored-by: Vijay Aravamudhan <vraravam@users.noreply.github.com>

1 files changed, 61 insertions, 3 deletions

diff --git a/src/components/ui/ImageUpload.tsx b/src/components/ui/ImageUpload.tsx
index 3a396f56c..7732928f8 100644
--- a/src/components/ui/ImageUpload.tsx
+++ b/src/components/ui/ImageUpload.tsx
@@ -4,6 +4,7 @@ import { Field } from 'mobx-react-form';
 import classnames from 'classnames';
 import Dropzone from 'react-dropzone';
 import { mdiDelete, mdiFileImage } from '@mdi/js';
+import prettyBytes from 'pretty-bytes';
 import { isWindows } from '../../environment';
 import Icon from './icon';
 
@@ -13,20 +14,33 @@ type Props = {
   multiple: boolean;
   textDelete: string;
   textUpload: string;
+  textMaxFileSize: string;
+  textMaxFileSizeError: string;
+  maxSize?: number;
+  maxFiles?: number;
+  messages: any;
 };
 
 // Should this file be converted into the coding style similar to './toggle/index.tsx'?
 class ImageUpload extends Component<Props> {
   static defaultProps = {
     multiple: false,
+    maxSize: Number.POSITIVE_INFINITY,
+    maxFiles: 0,
   };
 
   state = {
     path: null,
+    errorState: false,
   };
 
-  onDrop(acceptedFiles) {
+  errorMessage = {
+    message: '',
+  };
+
+  onDropAccepted(acceptedFiles) {
     const { field } = this.props;
+    this.setState({ errorState: false });
 
     for (const file of acceptedFiles) {
       const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path;
@@ -40,14 +54,43 @@ class ImageUpload extends Component<Props> {
     field.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(
+            (this.errorMessage = {
+              message: this.props.textMaxFileSizeError,
+            }),
+          );
+        }
+      }
+    }
+  }
+
   render() {
-    const { field, className, multiple, textDelete, textUpload } = this.props;
+    const {
+      field,
+      className,
+      multiple,
+      textDelete,
+      textUpload,
+      textMaxFileSize,
+      maxSize,
+      maxFiles,
+    } = 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">
@@ -83,9 +126,13 @@ class ImageUpload extends Component<Props> {
             </>
           ) : (
             <Dropzone
-              onDrop={this.onDrop.bind(this)}
+              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}>
@@ -97,6 +144,17 @@ class ImageUpload extends Component<Props> {
             </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.errorMessage.message}
+          </span>
+        )}
       </div>
     );
   }