diff options
author | André Oliveira <37463445+SpecialAro@users.noreply.github.com> | 2022-07-06 23:57:25 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-06 22:57:25 +0000 |
commit | 395850868b51b8c9aa077560bd0b4a4d80478fe7 (patch) | |
tree | 893d348bcdc355919069ca743d4f10cd54c8f2b8 | |
parent | Upgrade 'electron' to '19.0.8' (diff) | |
download | ferdium-app-395850868b51b8c9aa077560bd0b4a4d80478fe7.tar.gz ferdium-app-395850868b51b8c9aa077560bd0b4a4d80478fe7.tar.zst ferdium-app-395850868b51b8c9aa077560bd0b4a4d80478fe7.zip |
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>
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 14 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.tsx | 64 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 2 | ||||
-rw-r--r-- | src/styles/image-upload.scss | 14 |
4 files changed, 91 insertions, 3 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({ | |||
141 | id: 'settings.service.reloadRequired', | 141 | id: 'settings.service.reloadRequired', |
142 | defaultMessage: 'Changes require reload of the service', | 142 | defaultMessage: 'Changes require reload of the service', |
143 | }, | 143 | }, |
144 | maxFileSize: { | ||
145 | id: 'settings.service.form.maxFileSize', | ||
146 | defaultMessage: 'Maximum filesize:', | ||
147 | }, | ||
148 | maxFileSizeError: { | ||
149 | id: 'settings.service.form.maxFileSizeError', | ||
150 | defaultMessage: 'The file you are trying to submit is too large.', | ||
151 | }, | ||
144 | }); | 152 | }); |
145 | 153 | ||
146 | class EditServiceForm extends Component { | 154 | class EditServiceForm extends Component { |
@@ -398,6 +406,12 @@ class EditServiceForm extends Component { | |||
398 | field={form.$('customIcon')} | 406 | field={form.$('customIcon')} |
399 | textDelete={intl.formatMessage(messages.iconDelete)} | 407 | textDelete={intl.formatMessage(messages.iconDelete)} |
400 | textUpload={intl.formatMessage(messages.iconUpload)} | 408 | textUpload={intl.formatMessage(messages.iconUpload)} |
409 | maxSize={2_097_152} | ||
410 | maxFiles={1} | ||
411 | textMaxFileSize={intl.formatMessage(messages.maxFileSize)} | ||
412 | textMaxFileSizeError={intl.formatMessage( | ||
413 | messages.maxFileSizeError, | ||
414 | )} | ||
401 | /> | 415 | /> |
402 | </div> | 416 | </div> |
403 | </div> | 417 | </div> |
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'; | |||
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import Dropzone from 'react-dropzone'; | 5 | import Dropzone from 'react-dropzone'; |
6 | import { mdiDelete, mdiFileImage } from '@mdi/js'; | 6 | import { mdiDelete, mdiFileImage } from '@mdi/js'; |
7 | import prettyBytes from 'pretty-bytes'; | ||
7 | import { isWindows } from '../../environment'; | 8 | import { isWindows } from '../../environment'; |
8 | import Icon from './icon'; | 9 | import Icon from './icon'; |
9 | 10 | ||
@@ -13,20 +14,33 @@ type Props = { | |||
13 | multiple: boolean; | 14 | multiple: boolean; |
14 | textDelete: string; | 15 | textDelete: string; |
15 | textUpload: string; | 16 | textUpload: string; |
17 | textMaxFileSize: string; | ||
18 | textMaxFileSizeError: string; | ||
19 | maxSize?: number; | ||
20 | maxFiles?: number; | ||
21 | messages: any; | ||
16 | }; | 22 | }; |
17 | 23 | ||
18 | // Should this file be converted into the coding style similar to './toggle/index.tsx'? | 24 | // Should this file be converted into the coding style similar to './toggle/index.tsx'? |
19 | class ImageUpload extends Component<Props> { | 25 | class ImageUpload extends Component<Props> { |
20 | static defaultProps = { | 26 | static defaultProps = { |
21 | multiple: false, | 27 | multiple: false, |
28 | maxSize: Number.POSITIVE_INFINITY, | ||
29 | maxFiles: 0, | ||
22 | }; | 30 | }; |
23 | 31 | ||
24 | state = { | 32 | state = { |
25 | path: null, | 33 | path: null, |
34 | errorState: false, | ||
26 | }; | 35 | }; |
27 | 36 | ||
28 | onDrop(acceptedFiles) { | 37 | errorMessage = { |
38 | message: '', | ||
39 | }; | ||
40 | |||
41 | onDropAccepted(acceptedFiles) { | ||
29 | const { field } = this.props; | 42 | const { field } = this.props; |
43 | this.setState({ errorState: false }); | ||
30 | 44 | ||
31 | for (const file of acceptedFiles) { | 45 | for (const file of acceptedFiles) { |
32 | const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; | 46 | const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; |
@@ -40,14 +54,43 @@ class ImageUpload extends Component<Props> { | |||
40 | field.set(''); | 54 | field.set(''); |
41 | } | 55 | } |
42 | 56 | ||
57 | onDropRejected(rejectedFiles): void { | ||
58 | for (const file of rejectedFiles) { | ||
59 | for (const error of file.errors) { | ||
60 | if (error.code === 'file-too-large') { | ||
61 | this.setState({ errorState: true }); | ||
62 | this.setState( | ||
63 | (this.errorMessage = { | ||
64 | message: this.props.textMaxFileSizeError, | ||
65 | }), | ||
66 | ); | ||
67 | } | ||
68 | } | ||
69 | } | ||
70 | } | ||
71 | |||
43 | render() { | 72 | render() { |
44 | const { field, className, multiple, textDelete, textUpload } = this.props; | 73 | const { |
74 | field, | ||
75 | className, | ||
76 | multiple, | ||
77 | textDelete, | ||
78 | textUpload, | ||
79 | textMaxFileSize, | ||
80 | maxSize, | ||
81 | maxFiles, | ||
82 | } = this.props; | ||
45 | 83 | ||
46 | const cssClasses = classnames({ | 84 | const cssClasses = classnames({ |
47 | 'image-upload__dropzone': true, | 85 | 'image-upload__dropzone': true, |
48 | [`${className}`]: className, | 86 | [`${className}`]: className, |
49 | }); | 87 | }); |
50 | 88 | ||
89 | const maxSizeParse: number = | ||
90 | maxSize === undefined || maxSize === Number.POSITIVE_INFINITY | ||
91 | ? 0 | ||
92 | : maxSize; | ||
93 | |||
51 | return ( | 94 | return ( |
52 | <div className="image-upload-wrapper"> | 95 | <div className="image-upload-wrapper"> |
53 | <label className="franz-form__label" htmlFor="iconUpload"> | 96 | <label className="franz-form__label" htmlFor="iconUpload"> |
@@ -83,9 +126,13 @@ class ImageUpload extends Component<Props> { | |||
83 | </> | 126 | </> |
84 | ) : ( | 127 | ) : ( |
85 | <Dropzone | 128 | <Dropzone |
86 | onDrop={this.onDrop.bind(this)} | 129 | onDropAccepted={this.onDropAccepted.bind(this)} |
130 | onDropRejected={this.onDropRejected.bind(this)} | ||
87 | multiple={multiple} | 131 | multiple={multiple} |
88 | accept="image/jpeg, image/png, image/svg+xml" | 132 | accept="image/jpeg, image/png, image/svg+xml" |
133 | minSize={0} | ||
134 | maxSize={maxSize} | ||
135 | maxFiles={maxFiles} | ||
89 | > | 136 | > |
90 | {({ getRootProps, getInputProps }) => ( | 137 | {({ getRootProps, getInputProps }) => ( |
91 | <div {...getRootProps()} className={cssClasses}> | 138 | <div {...getRootProps()} className={cssClasses}> |
@@ -97,6 +144,17 @@ class ImageUpload extends Component<Props> { | |||
97 | </Dropzone> | 144 | </Dropzone> |
98 | )} | 145 | )} |
99 | </div> | 146 | </div> |
147 | {maxSizeParse !== 0 && ( | ||
148 | <span className="image-upload-wrapper__file-size"> | ||
149 | {textMaxFileSize}{' '} | ||
150 | {prettyBytes(maxSizeParse, { maximumFractionDigits: 1 })} | ||
151 | </span> | ||
152 | )} | ||
153 | {this.state.errorState && ( | ||
154 | <span className="image-upload-wrapper__file-size-error"> | ||
155 | {this.errorMessage.message} | ||
156 | </span> | ||
157 | )} | ||
100 | </div> | 158 | </div> |
101 | ); | 159 | ); |
102 | } | 160 | } |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index f3c3d1766..b04640a65 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -371,6 +371,8 @@ | |||
371 | "settings.service.form.useHostedService": "Use the hosted {name} service.", | 371 | "settings.service.form.useHostedService": "Use the hosted {name} service.", |
372 | "settings.service.form.yourServices": "Your services", | 372 | "settings.service.form.yourServices": "Your services", |
373 | "settings.service.reloadRequired": "Changes require reload of the service", | 373 | "settings.service.reloadRequired": "Changes require reload of the service", |
374 | "settings.service.form.maxFileSize": "Maximum filesize:", | ||
375 | "settings.service.form.maxFileSizeError": "The file you are trying to submit is too large.", | ||
374 | "settings.services.deletedInfo": "Service has been deleted", | 376 | "settings.services.deletedInfo": "Service has been deleted", |
375 | "settings.services.discoverServices": "Discover services", | 377 | "settings.services.discoverServices": "Discover services", |
376 | "settings.services.headline": "Your services", | 378 | "settings.services.headline": "Your services", |
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index b5f6d5cd4..900a69a48 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss | |||
@@ -112,3 +112,17 @@ | |||
112 | color: $theme-gray-light; | 112 | color: $theme-gray-light; |
113 | font-size: 40px; | 113 | font-size: 40px; |
114 | } | 114 | } |
115 | |||
116 | .image-upload-wrapper__file-size { | ||
117 | display: flex; | ||
118 | color: $theme-gray-light; | ||
119 | font-size: 10px; | ||
120 | margin-top: 3px; | ||
121 | } | ||
122 | |||
123 | .image-upload-wrapper__file-size-error { | ||
124 | display: flex; | ||
125 | color: $theme-brand-danger; | ||
126 | font-size: 12px; | ||
127 | margin-top: 10px; | ||
128 | } | ||