diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-01-02 22:54:17 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-01-02 22:54:47 +0100 |
commit | 6b97e42537879be306cd2aaf95dd8aebf8655fcb (patch) | |
tree | 2c2628d507cbf34c953dc97d9a5fe30d8ffcd5db /src/components/ui/ImageUpload.js | |
parent | First working draft of icon upload (diff) | |
download | ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.tar.gz ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.tar.zst ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.zip |
feat(Service): Add custom service icon upload
Diffstat (limited to 'src/components/ui/ImageUpload.js')
-rw-r--r-- | src/components/ui/ImageUpload.js | 93 |
1 files changed, 51 insertions, 42 deletions
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index f25d966f4..08809f007 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -12,6 +12,8 @@ export default class ImageUpload extends Component { | |||
12 | field: PropTypes.instanceOf(Field).isRequired, | 12 | field: PropTypes.instanceOf(Field).isRequired, |
13 | className: PropTypes.string, | 13 | className: PropTypes.string, |
14 | multiple: PropTypes.bool, | 14 | multiple: PropTypes.bool, |
15 | textDelete: PropTypes.string.isRequired, | ||
16 | textUpload: PropTypes.string.isRequired, | ||
15 | }; | 17 | }; |
16 | 18 | ||
17 | static defaultProps = { | 19 | static defaultProps = { |
@@ -39,56 +41,63 @@ export default class ImageUpload extends Component { | |||
39 | field, | 41 | field, |
40 | className, | 42 | className, |
41 | multiple, | 43 | multiple, |
44 | textDelete, | ||
45 | textUpload, | ||
42 | } = this.props; | 46 | } = this.props; |
43 | 47 | ||
44 | const cssClasses = classnames({ | 48 | const cssClasses = classnames({ |
45 | 'franz-form__button': true, | 49 | 'image-upload__dropzone': true, |
46 | [`${className}`]: className, | 50 | [`${className}`]: className, |
47 | }); | 51 | }); |
48 | 52 | ||
49 | return ( | 53 | return ( |
50 | <div> | 54 | <div className="image-upload-wrapper"> |
51 | {field.label} | 55 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> |
52 | {(field.value && field.value !== 'delete') || this.state.path ? ( | 56 | <div className="image-upload"> |
53 | <div | 57 | {(field.value && field.value !== 'delete') || this.state.path ? ( |
54 | className="image-upload" | 58 | <div> |
55 | > | 59 | <div |
56 | <div | 60 | className="image-upload__preview" |
57 | className="image-upload__preview" | 61 | style={({ |
58 | style={({ | 62 | backgroundImage: `url("${field.value || this.state.path}")`, |
59 | backgroundImage: `url(${field.value || this.state.path})`, | 63 | })} |
60 | })} | 64 | /> |
61 | /> | 65 | <div className="image-upload__action"> |
62 | <div className="image-upload__action"> | 66 | <button |
63 | <button | 67 | type="button" |
64 | type="button" | 68 | onClick={() => { |
65 | onClick={() => { | 69 | if (field.value) { |
66 | if (field.value) { | 70 | field.set('delete'); |
67 | field.value = 'delete'; | 71 | } else { |
68 | } else { | 72 | this.setState({ |
69 | this.setState({ | 73 | path: null, |
70 | path: null, | 74 | }); |
71 | }); | 75 | } |
72 | } | 76 | }} |
73 | }} | 77 | > |
74 | > | 78 | <i className="mdi mdi-delete" /> |
75 | remove icon | 79 | <p> |
76 | 80 | {textDelete} | |
77 | </button> | 81 | </p> |
78 | <div className="image-upload__action-background" /> | 82 | </button> |
83 | <div className="image-upload__action-background" /> | ||
84 | </div> | ||
79 | </div> | 85 | </div> |
80 | </div> | 86 | ) : ( |
81 | ) : ( | 87 | <Dropzone |
82 | <Dropzone | 88 | ref={(node) => { this.dropzoneRef = node; }} |
83 | ref={(node) => { this.dropzoneRef = node; }} | 89 | onDrop={this.onDrop.bind(this)} |
84 | onDrop={this.onDrop.bind(this)} | 90 | className={cssClasses} |
85 | className={cssClasses} | 91 | multiple={multiple} |
86 | multiple={multiple} | 92 | accept="image/jpeg, image/png" |
87 | accept="image/jpeg, image/png" | 93 | > |
88 | > | 94 | <i className="mdi mdi-file-image" /> |
89 | <p>Try dropping some files here, or click to select files to upload.</p> | 95 | <p> |
90 | </Dropzone> | 96 | {textUpload} |
91 | )} | 97 | </p> |
98 | </Dropzone> | ||
99 | )} | ||
100 | </div> | ||
92 | </div> | 101 | </div> |
93 | ); | 102 | ); |
94 | } | 103 | } |