removing uploaded files

src/components/editors/EditorUploadButton/index.tsx

@@ -9,6 +9,7 @@ import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { connect } from 'react-redux';
+import { MAX_NODE_FILES } from '~/redux/node/constants';
 
 const mapStateToProps = state => {
   const { statuses, files } = selectUploads(state);
@@ -41,6 +42,11 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
 
   const onUpload = useCallback(
     (uploads: File[]) => {
+      const current = temp.length + data.files.length;
+      const limit = MAX_NODE_FILES - current;
+
+      if (current >= MAX_NODE_FILES) return;
+
       const items: IFileWithUUID[] = Array.from(uploads).map(
         (file: File): IFileWithUUID => ({
           file,
@@ -51,12 +57,12 @@ const EditorUploadButtonUnconnected: FC<IProps> = ({
         })
       );
 
-      const temps = items.map(file => file.temp_id);
+      const temps = items.map(file => file.temp_id).slice(0, limit);
 
       setTemp([...temp, ...temps]);
       uploadUploadFiles(items);
     },
-    [setTemp, uploadUploadFiles, temp]
+    [setTemp, uploadUploadFiles, temp, data]
   );
 
   const onFileAdd = useCallback(

src/components/editors/ImageGrid/index.tsx

@@ -7,6 +7,9 @@ import { IUploadStatus } from '~/redux/uploads/reducer';
 import { getURL } from '~/utils/dom';
 import assocPath from 'ramda/es/assocPath';
 import { moveArrItem } from '~/utils/fn';
+import omit from 'ramda/es/omit';
+import remove from 'ramda/es/remove';
+import reject from 'ramda/es/reject';
 
 interface IProps {
   data: INode;
@@ -19,13 +22,23 @@ const SortableItem = SortableElement(({ children }) => (
 ));
 
 const SortableList = SortableContainer(
-  ({ items, locked }: { items: IFile[]; locked: IUploadStatus[] }) => (
+  ({
+    items,
+    locked,
+    onDrop,
+  }: {
+    items: IFile[];
+    locked: IUploadStatus[];
+    onDrop: (file_id: IFile['id']) => void;
+  }) => (
     <div className={styles.grid}>
-      {items.map((file, index) => (
-        <SortableItem key={file.id} index={index} collection={0}>
-          <ImageUpload id={file.id} thumb={getURL(file)} />
-        </SortableItem>
-      ))}
+      {items
+        .filter(file => file && file.id)
+        .map((file, index) => (
+          <SortableItem key={file.id} index={index} collection={0}>
+            <ImageUpload id={file.id} thumb={getURL(file)} onDrop={onDrop} />
+          </SortableItem>
+        ))}
 
       {locked.map((item, index) => (
         <SortableItem key={item.temp_id} index={index} collection={1} disabled>
@@ -44,8 +57,18 @@ const ImageGrid: FC<IProps> = ({ data, setData, locked }) => {
     [data, setData]
   );
 
+  const onDrop = useCallback(
+    (file_id: IFile['id']) => {
+      setData(
+        assocPath(['files'], reject(el => !el || !el.id || el.id === file_id, data.files), data)
+      );
+    },
+    [setData, data]
+  );
+
   return (
     <SortableList
+      onDrop={onDrop}
       onSortEnd={onMove}
       axis="xy"
       items={data.files}

src/components/upload/ImageUpload/index.tsx

@@ -1,27 +1,43 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import classNames from 'classnames';
 import * as styles from './styles.scss';
 import { ArcProgress } from '~/components/input/ArcProgress';
+import { IFile } from '~/redux/types';
+import { Icon } from '~/components/input/Icon';
 
 interface IProps {
-  id?: string;
+  id?: IFile['id'];
   thumb?: string;
   progress?: number;
+  onDrop?: (file_id: IFile['id']) => void;
 
   is_uploading?: boolean;
 }
 
-const ImageUpload: FC<IProps> = ({ thumb, progress, is_uploading }) => (
-  <div className={styles.wrap}>
-    <div className={classNames(styles.thumb_wrap, { is_uploading })}>
-      {thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />}
-      {is_uploading && (
-        <div className={styles.progress}>
-          <ArcProgress size={72} progress={progress} />
+const ImageUpload: FC<IProps> = ({ thumb, progress, is_uploading, id, onDrop }) => {
+  const onDropFile = useCallback(() => {
+    if (!id || !onDrop) return;
+    onDrop(id);
+  }, [id, onDrop]);
+
+  return (
+    <div className={styles.wrap}>
+      {id && onDrop && (
+        <div className={styles.drop} onMouseDown={onDropFile}>
+          <Icon icon="close" />
         </div>
       )}
+
+      <div className={classNames(styles.thumb_wrap, { is_uploading })}>
+        {thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />}
+        {is_uploading && (
+          <div className={styles.progress}>
+            <ArcProgress size={72} progress={progress} />
+          </div>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export { ImageUpload };

src/components/upload/ImageUpload/styles.scss

@@ -57,3 +57,29 @@
 .helper {
   opacity: 0.3;
 }
+
+.drop {
+  width: 24px;
+  height: 24px;
+  background: #222222;
+  position: absolute;
+  right: $gap;
+  top: $gap;
+  border-radius: 12px;
+  z-index: 2;
+  transition: background-color 250ms, opacity 0.25s;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover {
+    opacity: 1;
+    background-color: $red;
+  }
+}