First working draft of icon upload

7 files changed, 82 insertions, 42 deletions

diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 8b3136d27..6b96f709e 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -167,27 +167,65 @@ export default class ServerApi {
       throw request;
     }
     const serviceData = await request.json();
+
+    if (data.iconFile) {
+      const iconUrl = await this.uploadServiceIcon(serviceData.data.id, data.iconFile);
+
+      serviceData.data.iconUrl = iconUrl;
+    }
+
     const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
 
     console.debug('ServerApi::createService resolves', service);
     return service;
   }
 
-  async updateService(recipeId, data) {
-    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${recipeId}`, this._prepareAuthRequest({
+  async updateService(serviceId, rawData) {
+    const data = rawData;
+
+    if (data.iconFile) {
+      await this.uploadServiceIcon(serviceId, data.iconFile);
+    }
+
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, this._prepareAuthRequest({
       method: 'PUT',
       body: JSON.stringify(data),
     }));
+
     if (!request.ok) {
       throw request;
     }
+
     const serviceData = await request.json();
+
     const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) });
 
     console.debug('ServerApi::updateService resolves', service);
     return service;
   }
 
+  async uploadServiceIcon(serviceId, icon) {
+    const formData = new FormData();
+    formData.append('icon', icon);
+
+    const requestData = this._prepareAuthRequest({
+      method: 'PUT',
+      body: formData,
+    });
+
+    delete requestData.headers['Content-Type'];
+
+    const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, requestData);
+
+    if (!request.ok) {
+      throw request;
+    }
+
+    const serviceData = await request.json();
+
+    return serviceData.data.iconUrl;
+  }
+
   async reorderService(data) {
     const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/reorder`, this._prepareAuthRequest({
       method: 'PUT',
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 {
         const values = form.values();
         let isValid = true;
 
+        const files = form.$('customIcon').files;
+        if (files) {
+          values.iconFile = files[0];
+        }
+
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
@@ -224,7 +229,7 @@ export default class EditServiceForm extends Component {
               </div>
               <div className="service-icon">
                 {/* <Input field={form.$('name')} focus /> */}
-                <ImageUpload field={form.$('icon')} />
+                <ImageUpload field={form.$('customIcon')} />
               </div>
             </div>
             {(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 {
     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);
+      this.props.field.onDrop(file);
     });
-    // req.end(callback);
   }
 
+  dropzoneRef = null;
+
   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 ? (
+        {(field.value && field.value !== 'delete') || this.state.path ? (
           <div
             className="image-upload"
           >
             <div
               className="image-upload__preview"
               style={({
-                backgroundImage: `url(${this.state.path})`,
+                backgroundImage: `url(${field.value || this.state.path})`,
               })}
             />
             <div className="image-upload__action">
               <button
                 type="button"
                 onClick={() => {
-                  this.setState({
-                    path: null,
-                  });
+                  if (field.value) {
+                    field.value = 'delete';
+                  } else {
+                    this.setState({
+                      path: null,
+                    });
+                  }
                 }}
               >
                 remove icon
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 8827896ef..8d3a268ad 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -106,10 +106,11 @@ export default class EditServiceScreen extends Component {
           value: !service.isMuted,
           default: true,
         },
-        icon: {
+        customIcon: {
           label: intl.formatMessage(messages.icon),
-          value: service.icon,
-          default: true,
+          value: service.hasCustomIcon ? service.icon : false,
+          default: null,
+          type: 'file',
         },
       },
     };
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 567537d75..bfb95da04 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -127,6 +127,7 @@
   "settings.service.form.headlineNotifications": "Notifications",
   "settings.service.form.headlineBadges": "Unread message badges",
   "settings.service.form.headlineGeneral": "General",
+  "settings.service.form.icon": "Icon",
   "settings.service.error.headline": "Error",
   "settings.service.error.goBack": "Back to services",
   "settings.service.error.message": "Could not load service recipe.",
diff --git a/src/models/Service.js b/src/models/Service.js
index 0b19440e7..652d2594c 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -24,7 +24,7 @@ export default class Service {
   @observable isNotificationEnabled = true;
   @observable isBadgeEnabled = true;
   @observable isIndirectMessageBadgeEnabled = true;
-  @observable customIconUrl = '';
+  @observable iconUrl = '';
   @observable hasCrashed = false;
 
   constructor(data, recipe) {
@@ -42,7 +42,8 @@ export default class Service {
     this.name = data.name || this.name;
     this.team = data.team || this.team;
     this.customUrl = data.customUrl || this.customUrl;
-    this.customIconUrl = data.customIconUrl || this.customIconUrl;
+    // this.customIconUrl = data.customIconUrl || this.customIconUrl;
+    this.iconUrl = data.iconUrl || this.iconUrl;
 
     this.order = data.order !== undefined
       ? data.order : this.order;
@@ -97,15 +98,15 @@ export default class Service {
   }
 
   @computed get icon() {
-    if (this.hasCustomIcon) {
-      return this.customIconUrl;
+    if (this.iconUrl) {
+      return this.iconUrl;
     }
 
     return path.join(this.recipe.path, 'icon.svg');
   }
 
   @computed get hasCustomIcon() {
-    return (this.customIconUrl !== '');
+    return Boolean(this.iconUrl);
   }
 
   @computed get iconPNG() {
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 66f37af26..4fb5c9767 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -172,9 +172,21 @@ export default class ServicesStore extends Store {
     const data = this._cleanUpTeamIdAndCustomUrl(service.recipe.id, serviceData);
     const request = this.updateServiceRequest.execute(serviceId, data);
 
+    const newData = serviceData;
+    if (serviceData.iconFile) {
+      await request._promise;
+
+      newData.iconUrl = request.result.data.iconUrl;
+    }
+
     this.allServicesRequest.patch((result) => {
       if (!result) return;
-      Object.assign(result.find(c => c.id === serviceId), serviceData);
+
+      if (data.customIcon === 'delete') {
+        data.iconUrl = '';
+      }
+
+      Object.assign(result.find(c => c.id === serviceId), newData);
     });
 
     await request._promise;