Upload custom icon on client

Dockerfile

@@ -10,7 +10,7 @@ RUN npm install --production
 
 COPY . .
 
-RUN mkdir -p ./public ./data \
+RUN mkdir -p ./public ./data ./data/uploads \
     && cd ./client \
     && npm install --production \
     && npm run build \

Dockerfile.multiarch

@@ -11,7 +11,7 @@ RUN apk --no-cache --virtual build-dependencies add python make g++ \
 
 COPY . .
 
-RUN mkdir -p ./public ./data \
+RUN mkdir -p ./public ./data ./data/uploads \
     && cd ./client \
     && npm install --production \
     && npm run build \

client/src/components/Apps/AppForm/AppForm.module.css

@@ -0,0 +1,7 @@
+.Switch {
+  text-decoration: underline;
+}
+
+.Switch:hover {
+  cursor: pointer;
+}

client/src/components/Apps/AppForm/AppForm.tsx

@@ -3,18 +3,23 @@ import { connect } from 'react-redux';
 import { addApp, updateApp } from '../../../store/actions';
 import { App, NewApp } from '../../../interfaces';
 
+import classes from './AppForm.module.css';
+
 import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import Button from '../../UI/Buttons/Button/Button';
+import axios from 'axios';
 
 interface ComponentProps {
   modalHandler: () => void;
-  addApp: (formData: NewApp) => any;
+  addApp: (formData: NewApp | FormData) => any;
   updateApp: (id: number, formData: NewApp) => any;
   app?: App;
 }
 
 const AppForm = (props: ComponentProps): JSX.Element => {
+  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(true);
+  const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [formData, setFormData] = useState<NewApp>({
     name: '',
     url: '',
@@ -52,11 +57,27 @@ const AppForm = (props: ComponentProps): JSX.Element => {
     })
   }
 
+  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+    if (e.target.files) {
+      setCustomIcon(e.target.files[0]);
+    }
+  }
+
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
 
     if (!props.app) {
-      props.addApp(formData);
+      if (customIcon) {
+        const data = new FormData();
+        data.append('icon', customIcon);
+
+        data.append('name', formData.name);
+        data.append('url', formData.url);
+
+        props.addApp(data);
+      } else {
+        props.addApp(formData);
+      }
     } else {
       props.updateApp(props.app.id, formData);
       props.modalHandler();
@@ -108,26 +129,51 @@ const AppForm = (props: ComponentProps): JSX.Element => {
           </a>
         </span>
       </InputGroup>
-      <InputGroup>
-        <label htmlFor='icon'>App Icon</label>
-        <input
-          type='text'
-          name='icon'
-          id='icon'
-          placeholder='book-open-outline'
-          required
-          value={formData.icon}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-        <span>
-          Use icon name from MDI. 
-          <a
-            href='https://materialdesignicons.com/'
-            target='blank'>
-            {' '}Click here for reference
-          </a>
-        </span>
-      </InputGroup>
+      {!useCustomIcon
+        // use mdi icon
+        ? (<InputGroup>
+            <label htmlFor='icon'>App Icon</label>
+            <input
+              type='text'
+              name='icon'
+              id='icon'
+              placeholder='book-open-outline'
+              required
+              value={formData.icon}
+              onChange={(e) => inputChangeHandler(e)}
+            />
+            <span>
+              Use icon name from MDI. 
+              <a
+                href='https://materialdesignicons.com/'
+                target='blank'>
+                {' '}Click here for reference
+              </a>
+            </span>
+            <span
+              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+              className={classes.Switch}>
+              Switch to custom icon upload
+            </span>
+          </InputGroup>)
+        // upload custom icon
+        : (<InputGroup>
+            <label htmlFor='icon'>App Icon</label>
+            <input
+              type='file'
+              name='icon'
+              id='icon'
+              required
+              onChange={(e) => fileChangeHandler(e)}
+              accept='.jpg,.jpeg,.png'
+            />
+            <span
+              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+              className={classes.Switch}>
+              Switch to MDI
+            </span>
+          </InputGroup>)
+      }
       {!props.app
         ? <Button>Add new application</Button>
         : <Button>Update application</Button>

client/src/store/actions/app.ts

@@ -61,7 +61,7 @@ export interface AddAppAction {
   payload: App;
 }
 
-export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => {
+export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
   try {
     const res = await axios.post<ApiResponse<App>>('/api/apps', formData);
 
@@ -69,7 +69,7 @@ export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => {
       type: ActionTypes.createNotification,
       payload: {
         title: 'Success',
-        message: `App ${formData.name} added`
+        message: `App added`
       }
     })
 
@@ -116,7 +116,7 @@ export interface UpdateAppAction {
   payload: App;
 }
 
-export const updateApp = (id: number, formData: NewApp) => async (dispatch: Dispatch) => {
+export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => {
   try {
     const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, formData);
 
@@ -124,7 +124,7 @@ export const updateApp = (id: number, formData: NewApp) => async (dispatch: Disp
       type: ActionTypes.createNotification,
       payload: {
         title: 'Success',
-        message: `App ${formData.name} updated`
+        message: `App updated`
       }
     })
 

controllers/apps.js

@@ -17,7 +17,6 @@ exports.createApp = asyncWrapper(async (req, res, next) => {
   let _body = { ...req.body };
 
   if (req.file) {
-    console.log(req.file.filename)
     _body.icon = req.file.filename;
   }