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, 14 insertions, 0 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 3da0246ac..f69d86726 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -141,6 +141,14 @@ const messages = defineMessages({
     id: 'settings.service.reloadRequired',
     defaultMessage: 'Changes require reload of the service',
   },
+  maxFileSize: {
+    id: 'settings.service.form.maxFileSize',
+    defaultMessage: 'Maximum filesize:',
+  },
+  maxFileSizeError: {
+    id: 'settings.service.form.maxFileSizeError',
+    defaultMessage: 'The file you are trying to submit is too large.',
+  },
 });
 
 class EditServiceForm extends Component {
@@ -398,6 +406,12 @@ class EditServiceForm extends Component {
                   field={form.$('customIcon')}
                   textDelete={intl.formatMessage(messages.iconDelete)}
                   textUpload={intl.formatMessage(messages.iconUpload)}
+                  maxSize={2_097_152}
+                  maxFiles={1}
+                  textMaxFileSize={intl.formatMessage(messages.maxFileSize)}
+                  textMaxFileSizeError={intl.formatMessage(
+                    messages.maxFileSizeError,
+                  )}
                 />
               </div>
             </div>