diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-12-27 13:09:17 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-12-27 13:09:17 +0100 |
commit | 150cfe764aeb9e93341ba2f231fd121fe85472af (patch) | |
tree | bc398a878ec736f666502af983160aa7829a7a3d /src/components | |
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')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 7 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.js | 42 |
2 files changed, 18 insertions, 31 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index ee69d53aa..4f2f98a01 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -127,6 +127,11 @@ export default class EditServiceForm extends Component { | |||
127 | const values = form.values(); | 127 | const values = form.values(); |
128 | let isValid = true; | 128 | let isValid = true; |
129 | 129 | ||
130 | const files = form.$('customIcon').files; | ||
131 | if (files) { | ||
132 | values.iconFile = files[0]; | ||
133 | } | ||
134 | |||
130 | if (recipe.validateUrl && values.customUrl) { | 135 | if (recipe.validateUrl && values.customUrl) { |
131 | this.setState({ isValidatingCustomUrl: true }); | 136 | this.setState({ isValidatingCustomUrl: true }); |
132 | try { | 137 | try { |
@@ -224,7 +229,7 @@ export default class EditServiceForm extends Component { | |||
224 | </div> | 229 | </div> |
225 | <div className="service-icon"> | 230 | <div className="service-icon"> |
226 | {/* <Input field={form.$('name')} focus /> */} | 231 | {/* <Input field={form.$('name')} focus /> */} |
227 | <ImageUpload field={form.$('icon')} /> | 232 | <ImageUpload field={form.$('customIcon')} /> |
228 | </div> | 233 | </div> |
229 | </div> | 234 | </div> |
230 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 235 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
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 |