[wip] add icon upload

2 files changed, 123 insertions, 1 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 753781507..bcbda7773 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -13,6 +13,7 @@ import Tabs, { TabItem } from '../../ui/Tabs';
 import Input from '../../ui/Input';
 import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
+import ImageUpload from '../../ui/ImageUpload';
 
 const messages = defineMessages({
   saveService: {
@@ -195,7 +196,15 @@ export default class EditServiceForm extends Component {
         </div>
         <div className="settings__body">
           <form onSubmit={e => this.submit(e)} id="form">
-            <Input field={form.$('name')} focus />
+            <div className="service-flex-grid">
+              <div className="service-name">
+                <Input field={form.$('name')} focus />
+              </div>
+              <div className="service-icon">
+                {/* <Input field={form.$('name')} focus /> */}
+                <ImageUpload field={form.$('icon')} />
+              </div>
+            </div>
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs
                 active={service.customUrl ? 1 : 0}
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 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { Field } from 'mobx-react-form';
+// import Loader from 'react-loader';
+import classnames from 'classnames';
+import Dropzone from 'react-dropzone';
+
+@observer
+export default class ImageUpload extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    multiple: PropTypes.bool,
+    // disabled: PropTypes.bool,
+    // onClick: PropTypes.func,
+    // type: PropTypes.string,
+    // buttonType: PropTypes.string,
+    // loaded: PropTypes.bool,
+    // htmlForm: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: null,
+    multiple: false,
+    // disabled: false,
+    // onClick: () => {},
+    // type: 'button',
+    // buttonType: '',
+    // loaded: true,
+    // htmlForm: '',
+  };
+
+  dropzoneRef = null;
+
+  state = {
+    path: null,
+  }
+
+  onDrop(acceptedFiles) {
+    // const req = request.post('/upload');
+    acceptedFiles.forEach((file) => {
+      console.log(file);
+      this.setState({
+        path: file.path,
+      });
+      // req.attach(file.name, file);
+    });
+    // req.end(callback);
+  }
+
+  render() {
+    const {
+      field,
+      className,
+      multiple,
+      // disabled,
+      // onClick,
+      // type,
+      // buttonType,
+      // loaded,
+      // htmlForm,
+    } = this.props;
+
+    const cssClasses = classnames({
+      'franz-form__button': true,
+      // [`franz-form__button--${buttonType}`]: buttonType,
+      [`${className}`]: className,
+    });
+
+    return (
+      <div>
+        {field.label}
+        {this.state.path ? (
+          <div
+            className="image-upload"
+          >
+            <div
+              className="image-upload__preview"
+              style={({
+                backgroundImage: `url(${this.state.path})`,
+              })}
+            />
+            <div className="image-upload__action">
+              <button
+                type="button"
+                onClick={() => {
+                  this.setState({
+                    path: null,
+                  });
+                }}
+              >
+                remove icon
+
+              </button>
+              <div className="image-upload__action-background" />
+            </div>
+          </div>
+        ) : (
+          <Dropzone
+            ref={(node) => { this.dropzoneRef = node; }}
+            onDrop={this.onDrop.bind(this)}
+            className={cssClasses}
+            multiple={multiple}
+            accept="image/jpeg, image/png"
+          >
+            <p>Try dropping some files here, or click to select files to upload.</p>
+          </Dropzone>
+        )}
+      </div>
+    );
+  }
+}