removing uploaded 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;
+  }
+}