fix(Service): Fix custom service icon upload

Author: adlk

src/components/settings/services/EditServiceForm.js

@@ -1,25 +1,25 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router';
-import { defineMessages, intlShape } from 'react-intl';
 import normalizeUrl from 'normalize-url';
+import PropTypes from 'prop-types';
+import { Component, Fragment } from 'react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
 
 import Form from '../../../lib/Form';
-import User from '../../../models/User';
 import Recipe from '../../../models/Recipe';
 import Service from '../../../models/Service';
-import Tabs, { TabItem } from '../../ui/Tabs';
-import Input from '../../ui/Input';
-import Toggle from '../../ui/Toggle';
+import User from '../../../models/User';
 import Button from '../../ui/Button';
 import ImageUpload from '../../ui/ImageUpload';
+import Input from '../../ui/Input';
 import Select from '../../ui/Select';
+import Tabs, { TabItem } from '../../ui/Tabs';
+import Toggle from '../../ui/Toggle';
 
-import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
-import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
-import { serviceLimitStore } from '../../../features/serviceLimit';
 import { isMac } from '../../../environment';
+import { serviceLimitStore } from '../../../features/serviceLimit';
+import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 
 const messages = defineMessages({
   saveService: {
@@ -160,7 +160,7 @@ export default @observer class EditServiceForm extends Component {
         const values = form.values();
         let isValid = true;
 
-        const files = form.$('customIcon').files;
+        const { files } = form.$('customIcon');
         if (files) {
           values.iconFile = files[0];
         }

src/components/ui/ImageUpload.js

@@ -1,8 +1,8 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { Field } from 'mobx-react-form';
-import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { Component, Fragment } from 'react';
 import Dropzone from 'react-dropzone';
 
 export default @observer class ImageUpload extends Component {
@@ -21,17 +21,40 @@ export default @observer class ImageUpload extends Component {
 
   state = {
     path: null,
+    image: null,
   }
 
   dropzoneRef = null;
 
   onDrop(acceptedFiles) {
     const { field } = this.props;
 
+    console.log('acceptedFiles', acceptedFiles);
+
     acceptedFiles.forEach((file) => {
-      this.setState({
-        path: file.path,
-      });
+      if (file) {
+        const reader = new FileReader();
+
+        // When the file reader is done, this function runs
+        reader.onloadend = () => {
+          // `reader.result` is something like: "data:image/png;base64,iVBORw0K..."
+          const base64Data = reader.result;
+
+          // If you need just the base64 portion without the data URL prefix:
+          // const base64String = base64Data.split(',')[1];
+
+          console.log('Base64 Image:', base64Data);
+
+          this.setState({
+            image: base64Data,
+          });
+          // Now you can use `base64Data` (or `base64String`) as needed.
+        };
+
+        // Read the file as a Data URL
+        reader.readAsDataURL(file);
+      }
+
       this.props.field.onDrop(file);
     });
 
@@ -52,16 +75,18 @@ export default @observer class ImageUpload extends Component {
       [`${className}`]: className,
     });
 
+    console.log('state', this.state);
+
     return (
       <div className="image-upload-wrapper">
         <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label>
         <div className="image-upload">
-          {(field.value && field.value !== 'delete') || this.state.path ? (
+          {(field.value && field.value !== 'delete') || this.state.image ? (
             <Fragment>
               <div
                 className="image-upload__preview"
                 style={({
-                  backgroundImage: `url("${this.state.path || field.value}")`,
+                  backgroundImage: `url("${this.state.image || field.value}")`,
                 })}
               />
               <div className="image-upload__action">
@@ -72,7 +97,7 @@ export default @observer class ImageUpload extends Component {
                       field.set('delete');
                     } else {
                       this.setState({
-                        path: null,
+                        image: null,
                       });
                     }
                   }}