diff options
-rw-r--r-- | src/components/settings/services/EditServiceForm.tsx | 2 | ||||
-rw-r--r-- | src/components/ui/imageUpload/index.tsx | 63 |
2 files changed, 32 insertions, 33 deletions
diff --git a/src/components/settings/services/EditServiceForm.tsx b/src/components/settings/services/EditServiceForm.tsx index 112e5a452..7104b1344 100644 --- a/src/components/settings/services/EditServiceForm.tsx +++ b/src/components/settings/services/EditServiceForm.tsx | |||
@@ -402,7 +402,7 @@ class EditServiceForm extends Component<IProps, IState> { | |||
402 | </div> | 402 | </div> |
403 | <div className="service-icon"> | 403 | <div className="service-icon"> |
404 | <ImageUpload | 404 | <ImageUpload |
405 | {...form.$('customIcon').bind()} | 405 | field={form.$('customIcon')} |
406 | textDelete={intl.formatMessage(messages.iconDelete)} | 406 | textDelete={intl.formatMessage(messages.iconDelete)} |
407 | textUpload={intl.formatMessage(messages.iconUpload)} | 407 | textUpload={intl.formatMessage(messages.iconUpload)} |
408 | maxSize={2_097_152} | 408 | maxSize={2_097_152} |
diff --git a/src/components/ui/imageUpload/index.tsx b/src/components/ui/imageUpload/index.tsx index 7a2ca747f..4a2a9b60f 100644 --- a/src/components/ui/imageUpload/index.tsx +++ b/src/components/ui/imageUpload/index.tsx | |||
@@ -1,34 +1,32 @@ | |||
1 | import { Component, InputHTMLAttributes } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import Dropzone from 'react-dropzone'; | 4 | import Dropzone from 'react-dropzone'; |
5 | import { mdiDelete, mdiFileImage } from '@mdi/js'; | 5 | import { mdiDelete, mdiFileImage } from '@mdi/js'; |
6 | import prettyBytes from 'pretty-bytes'; | 6 | import prettyBytes from 'pretty-bytes'; |
7 | import { noop } from 'lodash'; | ||
8 | import { isWindows } from '../../../environment'; | ||
9 | import Icon from '../icon'; | 7 | import Icon from '../icon'; |
10 | import { IFormField } from '../typings/generic'; | 8 | import { isWindows } from '../../../environment'; |
11 | 9 | ||
12 | interface IProps extends InputHTMLAttributes<HTMLInputElement>, IFormField { | 10 | interface IProps { |
13 | className: string; | 11 | field: any; |
14 | multiple: boolean; | ||
15 | textDelete: string; | 12 | textDelete: string; |
16 | textUpload: string; | 13 | textUpload: string; |
17 | textMaxFileSize: string; | 14 | textMaxFileSize: string; |
18 | textMaxFileSizeError: string; | 15 | textMaxFileSizeError: string; |
16 | className?: string; | ||
17 | multiple?: boolean; | ||
19 | maxSize?: number; | 18 | maxSize?: number; |
20 | maxFiles?: number; | 19 | maxFiles?: number; |
21 | messages: any; | ||
22 | set?: (value: string) => void; | ||
23 | } | 20 | } |
24 | 21 | ||
25 | interface IState { | 22 | interface IState { |
26 | path: string | null; | 23 | path: string | null; |
27 | errorState: boolean; | 24 | errorState: boolean; |
28 | errorMessage: { message: string }; | 25 | errorMessage: { |
26 | message: string; | ||
27 | }; | ||
29 | } | 28 | } |
30 | 29 | ||
31 | // TODO - drag and drop image for recipe add/edit not working from 6.2.0 need to look at it | ||
32 | @observer | 30 | @observer |
33 | class ImageUpload extends Component<IProps, IState> { | 31 | class ImageUpload extends Component<IProps, IState> { |
34 | constructor(props: IProps) { | 32 | constructor(props: IProps) { |
@@ -43,27 +41,28 @@ class ImageUpload extends Component<IProps, IState> { | |||
43 | }; | 41 | }; |
44 | } | 42 | } |
45 | 43 | ||
46 | onDropAccepted(acceptedFiles): void { | 44 | onDropAccepted(acceptedFiles) { |
47 | const { onDrop = noop, set = noop } = this.props; | 45 | const { field } = this.props; |
48 | this.setState({ errorState: false }); | 46 | this.setState({ errorState: false }); |
49 | 47 | ||
50 | for (const file of acceptedFiles) { | 48 | for (const file of acceptedFiles) { |
51 | const imgPath: string = isWindows | 49 | const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path; |
52 | ? file.path.replace(/\\/g, '/') | 50 | this.setState({ |
53 | : file.path; | 51 | path: imgPath, |
54 | this.setState({ path: imgPath }); | 52 | }); |
55 | onDrop(file); | 53 | |
54 | this.props.field.onDrop(file); | ||
56 | } | 55 | } |
57 | 56 | ||
58 | set(''); | 57 | field.set(''); |
59 | } | 58 | } |
60 | 59 | ||
61 | onDropRejected(rejectedFiles): void { | 60 | onDropRejected(rejectedFiles): void { |
62 | for (const file of rejectedFiles) { | 61 | for (const file of rejectedFiles) { |
63 | for (const error of file.errors) { | 62 | for (const error of file.errors) { |
64 | if (error.code === 'file-too-large') { | 63 | if (error.code === 'file-too-large') { |
65 | this.setState({ errorState: true }); | ||
66 | this.setState({ | 64 | this.setState({ |
65 | errorState: true, | ||
67 | errorMessage: { | 66 | errorMessage: { |
68 | message: this.props.textMaxFileSizeError, | 67 | message: this.props.textMaxFileSizeError, |
69 | }, | 68 | }, |
@@ -73,18 +72,16 @@ class ImageUpload extends Component<IProps, IState> { | |||
73 | } | 72 | } |
74 | } | 73 | } |
75 | 74 | ||
76 | render() { | 75 | render(): ReactElement { |
77 | const { | 76 | const { |
78 | className, | 77 | field, |
79 | multiple = false, | ||
80 | textDelete, | 78 | textDelete, |
81 | textUpload, | 79 | textUpload, |
82 | textMaxFileSize, | 80 | textMaxFileSize, |
83 | value, | 81 | className = '', |
82 | multiple = false, | ||
84 | maxSize = Number.POSITIVE_INFINITY, | 83 | maxSize = Number.POSITIVE_INFINITY, |
85 | maxFiles = 0, | 84 | maxFiles = 0, |
86 | label = '', | ||
87 | set = noop, | ||
88 | } = this.props; | 85 | } = this.props; |
89 | 86 | ||
90 | const cssClasses = classnames({ | 87 | const cssClasses = classnames({ |
@@ -100,25 +97,27 @@ class ImageUpload extends Component<IProps, IState> { | |||
100 | return ( | 97 | return ( |
101 | <div className="image-upload-wrapper"> | 98 | <div className="image-upload-wrapper"> |
102 | <label className="franz-form__label" htmlFor="iconUpload"> | 99 | <label className="franz-form__label" htmlFor="iconUpload"> |
103 | {label} | 100 | {field.label} |
104 | </label> | 101 | </label> |
105 | <div className="image-upload"> | 102 | <div className="image-upload"> |
106 | {(value && value !== 'delete') || this.state.path ? ( | 103 | {(field.value && field.value !== 'delete') || this.state.path ? ( |
107 | <> | 104 | <> |
108 | <div | 105 | <div |
109 | className="image-upload__preview" | 106 | className="image-upload__preview" |
110 | style={{ | 107 | style={{ |
111 | backgroundImage: `url("${this.state.path || value}")`, | 108 | backgroundImage: `url("${this.state.path || field.value}")`, |
112 | }} | 109 | }} |
113 | /> | 110 | /> |
114 | <div className="image-upload__action"> | 111 | <div className="image-upload__action"> |
115 | <button | 112 | <button |
116 | type="button" | 113 | type="button" |
117 | onClick={() => { | 114 | onClick={() => { |
118 | if (value) { | 115 | if (field.value) { |
119 | set('delete'); | 116 | field.set('delete'); |
120 | } else { | 117 | } else { |
121 | this.setState({ path: null }); | 118 | this.setState({ |
119 | path: null, | ||
120 | }); | ||
122 | } | 121 | } |
123 | }} | 122 | }} |
124 | > | 123 | > |