diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/ImageUpload.js | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js new file mode 100644 index 000000000..81c3b8da6 --- /dev/null +++ b/src/components/ui/ImageUpload.js | |||
@@ -0,0 +1,108 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { Field } from 'mobx-react-form'; | ||
5 | // import Loader from 'react-loader'; | ||
6 | import classnames from 'classnames'; | ||
7 | import Dropzone from 'react-dropzone'; | ||
8 | |||
9 | @observer | ||
10 | export default class ImageUpload extends Component { | ||
11 | static propTypes = { | ||
12 | field: PropTypes.instanceOf(Field).isRequired, | ||
13 | className: PropTypes.string, | ||
14 | multiple: PropTypes.bool, | ||
15 | textDelete: PropTypes.string.isRequired, | ||
16 | textUpload: PropTypes.string.isRequired, | ||
17 | }; | ||
18 | |||
19 | static defaultProps = { | ||
20 | className: null, | ||
21 | multiple: false, | ||
22 | }; | ||
23 | |||
24 | state = { | ||
25 | path: null, | ||
26 | } | ||
27 | |||
28 | onDrop(acceptedFiles) { | ||
29 | const { field } = this.props; | ||
30 | |||
31 | acceptedFiles.forEach((file) => { | ||
32 | this.setState({ | ||
33 | path: file.path, | ||
34 | }); | ||
35 | this.props.field.onDrop(file); | ||
36 | }); | ||
37 | |||
38 | field.set(''); | ||
39 | } | ||
40 | |||
41 | dropzoneRef = null; | ||
42 | |||
43 | render() { | ||
44 | const { | ||
45 | field, | ||
46 | className, | ||
47 | multiple, | ||
48 | textDelete, | ||
49 | textUpload, | ||
50 | } = this.props; | ||
51 | |||
52 | const cssClasses = classnames({ | ||
53 | 'image-upload__dropzone': true, | ||
54 | [`${className}`]: className, | ||
55 | }); | ||
56 | |||
57 | return ( | ||
58 | <div className="image-upload-wrapper"> | ||
59 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> | ||
60 | <div className="image-upload"> | ||
61 | {(field.value && field.value !== 'delete') || this.state.path ? ( | ||
62 | <div> | ||
63 | <div | ||
64 | className="image-upload__preview" | ||
65 | style={({ | ||
66 | backgroundImage: `url("${this.state.path || field.value}")`, | ||
67 | })} | ||
68 | /> | ||
69 | <div className="image-upload__action"> | ||
70 | <button | ||
71 | type="button" | ||
72 | onClick={() => { | ||
73 | if (field.value) { | ||
74 | field.set('delete'); | ||
75 | } else { | ||
76 | this.setState({ | ||
77 | path: null, | ||
78 | }); | ||
79 | } | ||
80 | }} | ||
81 | > | ||
82 | <i className="mdi mdi-delete" /> | ||
83 | <p> | ||
84 | {textDelete} | ||
85 | </p> | ||
86 | </button> | ||
87 | <div className="image-upload__action-background" /> | ||
88 | </div> | ||
89 | </div> | ||
90 | ) : ( | ||
91 | <Dropzone | ||
92 | ref={(node) => { this.dropzoneRef = node; }} | ||
93 | onDrop={this.onDrop.bind(this)} | ||
94 | className={cssClasses} | ||
95 | multiple={multiple} | ||
96 | accept="image/jpeg, image/png" | ||
97 | > | ||
98 | <i className="mdi mdi-file-image" /> | ||
99 | <p> | ||
100 | {textUpload} | ||
101 | </p> | ||
102 | </Dropzone> | ||
103 | )} | ||
104 | </div> | ||
105 | </div> | ||
106 | ); | ||
107 | } | ||
108 | } | ||