diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/ui/ImageUpload.js | 36 |
1 files changed, 18 insertions, 18 deletions
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index e0b608b96..e831eb47b 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -21,7 +21,7 @@ export default @observer class ImageUpload extends Component { | |||
21 | 21 | ||
22 | state = { | 22 | state = { |
23 | path: null, | 23 | path: null, |
24 | } | 24 | }; |
25 | 25 | ||
26 | dropzoneRef = null; | 26 | dropzoneRef = null; |
27 | 27 | ||
@@ -40,11 +40,7 @@ export default @observer class ImageUpload extends Component { | |||
40 | 40 | ||
41 | render() { | 41 | render() { |
42 | const { | 42 | const { |
43 | field, | 43 | field, className, multiple, textDelete, textUpload, |
44 | className, | ||
45 | multiple, | ||
46 | textDelete, | ||
47 | textUpload, | ||
48 | } = this.props; | 44 | } = this.props; |
49 | 45 | ||
50 | const cssClasses = classnames({ | 46 | const cssClasses = classnames({ |
@@ -54,15 +50,17 @@ export default @observer class ImageUpload extends Component { | |||
54 | 50 | ||
55 | return ( | 51 | return ( |
56 | <div className="image-upload-wrapper"> | 52 | <div className="image-upload-wrapper"> |
57 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> | 53 | <label className="franz-form__label" htmlFor="iconUpload"> |
54 | {field.label} | ||
55 | </label> | ||
58 | <div className="image-upload"> | 56 | <div className="image-upload"> |
59 | {(field.value && field.value !== 'delete') || this.state.path ? ( | 57 | {(field.value && field.value !== 'delete') || this.state.path ? ( |
60 | <Fragment> | 58 | <Fragment> |
61 | <div | 59 | <div |
62 | className="image-upload__preview" | 60 | className="image-upload__preview" |
63 | style={({ | 61 | style={{ |
64 | backgroundImage: `url("${this.state.path || field.value}")`, | 62 | backgroundImage: `url("${this.state.path || field.value}")`, |
65 | })} | 63 | }} |
66 | /> | 64 | /> |
67 | <div className="image-upload__action"> | 65 | <div className="image-upload__action"> |
68 | <button | 66 | <button |
@@ -78,25 +76,27 @@ export default @observer class ImageUpload extends Component { | |||
78 | }} | 76 | }} |
79 | > | 77 | > |
80 | <i className="mdi mdi-delete" /> | 78 | <i className="mdi mdi-delete" /> |
81 | <p> | 79 | <p>{textDelete}</p> |
82 | {textDelete} | ||
83 | </p> | ||
84 | </button> | 80 | </button> |
85 | <div className="image-upload__action-background" /> | 81 | <div className="image-upload__action-background" /> |
86 | </div> | 82 | </div> |
87 | </Fragment> | 83 | </Fragment> |
88 | ) : ( | 84 | ) : ( |
89 | <Dropzone | 85 | <Dropzone |
90 | ref={(node) => { this.dropzoneRef = node; }} | 86 | ref={(node) => { |
87 | this.dropzoneRef = node; | ||
88 | }} | ||
91 | onDrop={this.onDrop.bind(this)} | 89 | onDrop={this.onDrop.bind(this)} |
92 | className={cssClasses} | ||
93 | multiple={multiple} | 90 | multiple={multiple} |
94 | accept="image/jpeg, image/png, image/svg+xml" | 91 | accept="image/jpeg, image/png, image/svg+xml" |
95 | > | 92 | > |
96 | <i className="mdi mdi-file-image" /> | 93 | {({ getRootProps, getInputProps }) => ( |
97 | <p> | 94 | <div {...getRootProps()} className={cssClasses}> |
98 | {textUpload} | 95 | <i className="mdi mdi-file-image" /> |
99 | </p> | 96 | <p>{textUpload}</p> |
97 | <input {...getInputProps()} /> | ||
98 | </div> | ||
99 | )} | ||
100 | </Dropzone> | 100 | </Dropzone> |
101 | )} | 101 | )} |
102 | </div> | 102 | </div> |