diff options
author | 2017-12-27 13:09:17 +0100 | |
---|---|---|
committer | 2017-12-27 13:09:17 +0100 | |
commit | 150cfe764aeb9e93341ba2f231fd121fe85472af (patch) | |
tree | bc398a878ec736f666502af983160aa7829a7a3d /src/components/ui/ImageUpload.js | |
parent | Merge branch 'develop' into feature/icon-upload (diff) | |
download | ferdium-app-150cfe764aeb9e93341ba2f231fd121fe85472af.tar.gz ferdium-app-150cfe764aeb9e93341ba2f231fd121fe85472af.tar.zst ferdium-app-150cfe764aeb9e93341ba2f231fd121fe85472af.zip |
First working draft of icon upload
Diffstat (limited to 'src/components/ui/ImageUpload.js')
-rw-r--r-- | src/components/ui/ImageUpload.js | 42 |
1 files changed, 12 insertions, 30 deletions
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index d07c3649c..f25d966f4 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -12,82 +12,64 @@ 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 | // disabled: PropTypes.bool, | ||
16 | // onClick: PropTypes.func, | ||
17 | // type: PropTypes.string, | ||
18 | // buttonType: PropTypes.string, | ||
19 | // loaded: PropTypes.bool, | ||
20 | // htmlForm: PropTypes.string, | ||
21 | }; | 15 | }; |
22 | 16 | ||
23 | static defaultProps = { | 17 | static defaultProps = { |
24 | className: null, | 18 | className: null, |
25 | multiple: false, | 19 | multiple: false, |
26 | // disabled: false, | ||
27 | // onClick: () => {}, | ||
28 | // type: 'button', | ||
29 | // buttonType: '', | ||
30 | // loaded: true, | ||
31 | // htmlForm: '', | ||
32 | }; | 20 | }; |
33 | 21 | ||
34 | dropzoneRef = null; | ||
35 | |||
36 | state = { | 22 | state = { |
37 | path: null, | 23 | path: null, |
38 | } | 24 | } |
39 | 25 | ||
40 | onDrop(acceptedFiles) { | 26 | onDrop(acceptedFiles) { |
41 | // const req = request.post('/upload'); | ||
42 | acceptedFiles.forEach((file) => { | 27 | acceptedFiles.forEach((file) => { |
43 | console.log(file); | ||
44 | this.setState({ | 28 | this.setState({ |
45 | path: file.path, | 29 | path: file.path, |
46 | }); | 30 | }); |
47 | // req.attach(file.name, file); | 31 | this.props.field.onDrop(file); |
48 | }); | 32 | }); |
49 | // req.end(callback); | ||
50 | } | 33 | } |
51 | 34 | ||
35 | dropzoneRef = null; | ||
36 | |||
52 | render() { | 37 | render() { |
53 | const { | 38 | const { |
54 | field, | 39 | field, |
55 | className, | 40 | className, |
56 | multiple, | 41 | multiple, |
57 | // disabled, | ||
58 | // onClick, | ||
59 | // type, | ||
60 | // buttonType, | ||
61 | // loaded, | ||
62 | // htmlForm, | ||
63 | } = this.props; | 42 | } = this.props; |
64 | 43 | ||
65 | const cssClasses = classnames({ | 44 | const cssClasses = classnames({ |
66 | 'franz-form__button': true, | 45 | 'franz-form__button': true, |
67 | // [`franz-form__button--${buttonType}`]: buttonType, | ||
68 | [`${className}`]: className, | 46 | [`${className}`]: className, |
69 | }); | 47 | }); |
70 | 48 | ||
71 | return ( | 49 | return ( |
72 | <div> | 50 | <div> |
73 | {field.label} | 51 | {field.label} |
74 | {this.state.path ? ( | 52 | {(field.value && field.value !== 'delete') || this.state.path ? ( |
75 | <div | 53 | <div |
76 | className="image-upload" | 54 | className="image-upload" |
77 | > | 55 | > |
78 | <div | 56 | <div |
79 | className="image-upload__preview" | 57 | className="image-upload__preview" |
80 | style={({ | 58 | style={({ |
81 | backgroundImage: `url(${this.state.path})`, | 59 | backgroundImage: `url(${field.value || this.state.path})`, |
82 | })} | 60 | })} |
83 | /> | 61 | /> |
84 | <div className="image-upload__action"> | 62 | <div className="image-upload__action"> |
85 | <button | 63 | <button |
86 | type="button" | 64 | type="button" |
87 | onClick={() => { | 65 | onClick={() => { |
88 | this.setState({ | 66 | if (field.value) { |
89 | path: null, | 67 | field.value = 'delete'; |
90 | }); | 68 | } else { |
69 | this.setState({ | ||
70 | path: null, | ||
71 | }); | ||
72 | } | ||
91 | }} | 73 | }} |
92 | > | 74 | > |
93 | remove icon | 75 | remove icon |