audio upload buttin

src/components/bars/SubmitBar/index.tsx

@@ -19,6 +19,7 @@ const SubmitBarUnconnected: FC<IProps> = ({ nodeCreate }) => {
   const onOpenImageEditor = useCallback(() => nodeCreate(NODE_TYPES.IMAGE), [nodeCreate]);
   const onOpenTextEditor = useCallback(() => nodeCreate(NODE_TYPES.TEXT), [nodeCreate]);
   const onOpenVideoEditor = useCallback(() => nodeCreate(NODE_TYPES.VIDEO), [nodeCreate]);
+  const onOpenAudioEditor = useCallback(() => nodeCreate(NODE_TYPES.AUDIO), [nodeCreate]);
 
   return (
     <div className={styles.wrap}>
@@ -34,6 +35,10 @@ const SubmitBarUnconnected: FC<IProps> = ({ nodeCreate }) => {
         <div onClick={onOpenVideoEditor}>
           <Icon icon="video" />
         </div>
+
+        <div onClick={onOpenAudioEditor}>
+          <Icon icon="audio" />
+        </div>
       </div>
 
       <div className={styles.button}>

src/components/editors/AudioEditor/index.tsx

@@ -0,0 +1,14 @@
+import React, { FC, useCallback } from 'react';
+import { INode } from '~/redux/types';
+import path from 'ramda/es/path';
+
+interface IProps {
+  data: INode;
+  setData: (val: INode) => void;
+}
+
+const AudioEditor: FC<IProps> = ({ data, setData }) => {
+  return <div>something!</div>;
+};
+
+export { AudioEditor };

src/components/editors/EditorAudioUploadButton/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
+import { INode } from '~/redux/types';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
+
+interface IProps {
+  data: INode;
+  setData: (val: INode) => void;
+  temp: string[];
+  setTemp: (val: string[]) => void;
+}
+
+const EditorAudioUploadButton: FC<IProps> = ({ data, setData, temp, setTemp }) => (
+  <EditorUploadButton
+    data={data}
+    setData={setData}
+    temp={temp}
+    setTemp={setTemp}
+    accept="audio/*"
+    icon="audio"
+    type={UPLOAD_TYPES.AUDIO}
+  />
+);
+
+export { EditorAudioUploadButton };

src/components/editors/EditorImageUploadButton/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
 import { INode } from '~/redux/types';
+import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 
 interface IProps {
   data: INode;
@@ -17,6 +18,7 @@ const EditorImageUploadButton: FC<IProps> = ({ data, setData, temp, setTemp }) =
     setTemp={setTemp}
     accept="image/*"
     icon="image"
+    type={UPLOAD_TYPES.IMAGE}
   />
 );
 

src/components/editors/EditorPanel/styles.scss

@@ -7,4 +7,17 @@
   box-sizing: border-box;
   padding: $gap;
   z-index: 10;
-}
+  display: flex;
+  flex-direction: row;
+
+  & > * {
+    margin: 0 $gap;
+
+    &:first-child {
+      margin-left: 0;
+    }
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}

src/components/editors/EditorUploadButton/index.tsx

@@ -30,6 +30,7 @@ type IProps = ReturnType<typeof mapStateToProps> &
 
     accept?: string;
     icon?: string;
+    type?: typeof UPLOAD_TYPES[keyof typeof UPLOAD_TYPES];
   };
 
 const EditorUploadButtonUnconnected: FC<IProps> = ({
@@ -42,6 +43,7 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
   uploadUploadFiles,
   accept = 'image/*',
   icon = 'plus',
+  type = UPLOAD_TYPES.IMAGE,
 }) => {
   const eventPreventer = useCallback(event => event.preventDefault(), []);
 
@@ -52,13 +54,15 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
 
       if (current >= NODE_SETTINGS.MAX_FILES) return;
 
+      console.log({ type });
+
       const items: IFileWithUUID[] = Array.from(uploads).map(
         (file: File): IFileWithUUID => ({
           file,
           temp_id: uuid(),
           subject: UPLOAD_SUBJECTS.EDITOR,
           target: UPLOAD_TARGETS.NODES,
-          type: UPLOAD_TYPES.IMAGE,
+          type,
         })
       );
 
@@ -67,7 +71,7 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
       setTemp([...temp, ...temps]);
       uploadUploadFiles(items);
     },
-    [setTemp, uploadUploadFiles, temp, data]
+    [setTemp, uploadUploadFiles, temp, data, type]
   );
 
   const onFileAdd = useCallback(