fixed file dropping and panel buttons

src/components/editors/EditorImageUploadButton/index.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
+import { INode } from '~/redux/types';
+
+interface IProps {
+  data: INode;
+  setData: (val: INode) => void;
+  temp: string[];
+  setTemp: (val: string[]) => void;
+}
+
+const EditorImageUploadButton: FC<IProps> = ({ data, setData, temp, setTemp }) => (
+  <EditorUploadButton
+    data={data}
+    setData={setData}
+    temp={temp}
+    setTemp={setTemp}
+    accept="image/*"
+    icon="image"
+  />
+);
+
+export { EditorImageUploadButton };

src/components/editors/EditorPanel/index.tsx

@@ -1,8 +1,7 @@
-import React, { FC } from 'react';
+import React, { FC, createElement } from 'react';
 import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
-import { EditorUploadButton } from '~/components/editors/EditorUploadButton';
+import { NODE_PANEL_COMPONENTS } from '~/redux/node/constants';
-import { NODE_UPLOAD_TYPES } from '~/redux/node/constants';
 
 interface IProps {
   data: INode;
@@ -13,8 +12,9 @@ interface IProps {
 
 const EditorPanel: FC<IProps> = ({ data, setData, temp, setTemp }) => (
   <div className={styles.panel}>
-    {data.type && NODE_UPLOAD_TYPES[data.type] && (
+    {NODE_PANEL_COMPONENTS[data.type] &&
-      <EditorUploadButton data={data} setData={setData} temp={temp} setTemp={setTemp} />
+      NODE_PANEL_COMPONENTS[data.type].map((el, key) =>
+        createElement(el, { key, data, setData, temp, setTemp })
       )}
   </div>
 );

src/components/editors/EditorUploadButton/index.tsx

@@ -27,6 +27,9 @@ type IProps = ReturnType<typeof mapStateToProps> &
     setData: (val: INode) => void;
     temp: string[];
     setTemp: (val: string[]) => void;
+
+    accept?: string;
+    icon?: string;
   };
 
 const EditorUploadButtonUnconnected: FC<IProps> = ({
@@ -37,6 +40,8 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
   statuses,
   files,
   uploadUploadFiles,
+  accept = 'image/*',
+  icon = 'plus',
 }) => {
   const eventPreventer = useCallback(event => event.preventDefault(), []);
 
@@ -116,10 +121,10 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
 
   return (
     <div className={styles.wrap}>
-      <input type="file" onChange={onInputChange} accept="image/*" multiple />
+      <input type="file" onChange={onInputChange} accept={accept} multiple />
 
       <div className={styles.icon}>
-        <Icon size={32} icon="plus" />
+        <Icon size={32} icon={icon} />
       </div>
     </div>
   );

src/components/editors/ImageGrid/index.tsx

@@ -17,14 +17,14 @@ interface IProps {
 const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles(moveArrItem(oldIndex, newIndex, files) as IFile[]);
+      setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]);
     },
     [setFiles, files]
   );
 
   const onDrop = useCallback(
     (remove_id: IFile['id']) => {
-      setFiles(files.filter(file => file.id === remove_id));
+      setFiles(files.filter(file => file && file.id !== remove_id));
     },
     [setFiles, files]
   );

src/containers/dialogs/Modal/index.tsx

@@ -29,8 +29,6 @@ const ModalUnconnected: FC<IProps> = ({
 
   if (!dialog || !DIALOG_CONTENT[dialog] || !is_shown) return null;
 
-  console.log({ onRequestClose });
-
   return ReactDOM.createPortal(
     <div className={styles.fixed}>
       <div className={styles.overlay} onClick={onRequestClose} />

src/redux/node/constants.ts

@@ -7,6 +7,7 @@ import { ImageEditor } from '~/components/editors/ImageEditor';
 import { TextEditor } from '~/components/editors/TextEditor';
 import { VideoEditor } from '~/components/editors/VideoEditor';
 import { UPLOAD_TYPES } from '../uploads/constants';
+import { EditorImageUploadButton } from '~/components/editors/EditorImageUploadButton';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -89,8 +90,8 @@ export const NODE_EDITORS = {
   [NODE_TYPES.VIDEO]: VideoEditor,
 };
 
-export const NODE_UPLOAD_TYPES = {
+export const NODE_PANEL_COMPONENTS = {
-  [NODE_TYPES.IMAGE]: [UPLOAD_TYPES.IMAGE],
+  [NODE_TYPES.IMAGE]: [EditorImageUploadButton],
 };
 
 export const NODE_EDITOR_DATA: Record<