diff options
author | 2017-11-12 19:12:29 +0100 | |
---|---|---|
committer | 2017-11-12 19:12:29 +0100 | |
commit | a1bdd02fca413cdc314137dc65e835131c358e72 (patch) | |
tree | 9e1e48092288e2a578b84cb366da3276553c39cf /src/components/ui/ImageUpload.js | |
parent | Merge pull request #252 from meetfranz/feature/mute-service (diff) | |
download | ferdium-app-a1bdd02fca413cdc314137dc65e835131c358e72.tar.gz ferdium-app-a1bdd02fca413cdc314137dc65e835131c358e72.tar.zst ferdium-app-a1bdd02fca413cdc314137dc65e835131c358e72.zip |
[wip] add icon upload
Diffstat (limited to 'src/components/ui/ImageUpload.js')
-rw-r--r-- | src/components/ui/ImageUpload.js | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js new file mode 100644 index 000000000..d07c3649c --- /dev/null +++ b/src/components/ui/ImageUpload.js | |||
@@ -0,0 +1,113 @@ | |||
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 | // disabled: PropTypes.bool, | ||
16 | // onClick: PropTypes.func, | ||
17 | // type: PropTypes.string, | ||
18 | // buttonType: PropTypes.string, | ||
19 | // loaded: PropTypes.bool, | ||
20 | // htmlForm: PropTypes.string, | ||
21 | }; | ||
22 | |||
23 | static defaultProps = { | ||
24 | className: null, | ||
25 | multiple: false, | ||
26 | // disabled: false, | ||
27 | // onClick: () => {}, | ||
28 | // type: 'button', | ||
29 | // buttonType: '', | ||
30 | // loaded: true, | ||
31 | // htmlForm: '', | ||
32 | }; | ||
33 | |||
34 | dropzoneRef = null; | ||
35 | |||
36 | state = { | ||
37 | path: null, | ||
38 | } | ||
39 | |||
40 | onDrop(acceptedFiles) { | ||
41 | // const req = request.post('/upload'); | ||
42 | acceptedFiles.forEach((file) => { | ||
43 | console.log(file); | ||
44 | this.setState({ | ||
45 | path: file.path, | ||
46 | }); | ||
47 | // req.attach(file.name, file); | ||
48 | }); | ||
49 | // req.end(callback); | ||
50 | } | ||
51 | |||
52 | render() { | ||
53 | const { | ||
54 | field, | ||
55 | className, | ||
56 | multiple, | ||
57 | // disabled, | ||
58 | // onClick, | ||
59 | // type, | ||
60 | // buttonType, | ||
61 | // loaded, | ||
62 | // htmlForm, | ||
63 | } = this.props; | ||
64 | |||
65 | const cssClasses = classnames({ | ||
66 | 'franz-form__button': true, | ||
67 | // [`franz-form__button--${buttonType}`]: buttonType, | ||
68 | [`${className}`]: className, | ||
69 | }); | ||
70 | |||
71 | return ( | ||
72 | <div> | ||
73 | {field.label} | ||
74 | {this.state.path ? ( | ||
75 | <div | ||
76 | className="image-upload" | ||
77 | > | ||
78 | <div | ||
79 | className="image-upload__preview" | ||
80 | style={({ | ||
81 | backgroundImage: `url(${this.state.path})`, | ||
82 | })} | ||
83 | /> | ||
84 | <div className="image-upload__action"> | ||
85 | <button | ||
86 | type="button" | ||
87 | onClick={() => { | ||
88 | this.setState({ | ||
89 | path: null, | ||
90 | }); | ||
91 | }} | ||
92 | > | ||
93 | remove icon | ||
94 | |||
95 | </button> | ||
96 | <div className="image-upload__action-background" /> | ||
97 | </div> | ||
98 | </div> | ||
99 | ) : ( | ||
100 | <Dropzone | ||
101 | ref={(node) => { this.dropzoneRef = node; }} | ||
102 | onDrop={this.onDrop.bind(this)} | ||
103 | className={cssClasses} | ||
104 | multiple={multiple} | ||
105 | accept="image/jpeg, image/png" | ||
106 | > | ||
107 | <p>Try dropping some files here, or click to select files to upload.</p> | ||
108 | </Dropzone> | ||
109 | )} | ||
110 | </div> | ||
111 | ); | ||
112 | } | ||
113 | } | ||