Files upload implemented

src/components/Icons/Document.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Document = () => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM9 12C8.44772 12 8 12.4477 8
+       13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9ZM9 16C8.44772 16 8
+       16.4477 8 17C8 17.5523 8.44772 18 9 18H15C15.5523 18 16 17.5523 16 17C16 16.4477 15.5523 16 15 16H9ZM6 20H18V
+       9H15C13.8954 9 13 8.10457 13 7V4H6V20Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default Document;

src/components/UploadFiles/UploadFiles.tsx

@@ -0,0 +1,85 @@
+import React, { FC } from 'react';
+import Button from '../Button/Button';
+import { IFile, IUploadFilesProps } from './interfaces/IUploadFiles';
+import DocumentIcon from '../Icons/Document';
+import { Colors, Sizes, Variants } from '../../constants/general';
+import styles from './sass/UploadFiles.module.scss';
+
+const UploadFiles: FC<IUploadFilesProps> = ({
+  files = [],
+  title = 'Upload Files',
+  onChange = () => {},
+  isShowUploadBtn = true,
+  className = '',
+  onDelete = () => {},
+  isMultiple = false,
+  accept = undefined,
+}) => {
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { files: uploadedFiles } = event.target;
+    const selectedFiles = uploadedFiles as FileList;
+    const tempFiles = [...Array.from(selectedFiles)].map((file) => {
+      const reader = new FileReader();
+      return new Promise((resolve) => {
+        reader.onload = () => {
+          resolve({ file, src: reader.result, name: file.name });
+        };
+        reader.readAsDataURL(file);
+      });
+    });
+    const res = await Promise.all(tempFiles) as IFile[];
+
+    onChange(isMultiple ? [...files, ...res] : res[0], event);
+  };
+
+  const handleRemove = (removeIndex: number) => {
+    if (isMultiple) {
+      const tempFiles = [...files];
+
+      tempFiles.splice(removeIndex, 1);
+      onDelete(tempFiles);
+    } else {
+      onDelete(null);
+    }
+  };
+
+  return (
+    <div className={`${styles.wrapper} ${className}`}>
+      {files?.length > 0 && files[0] && (
+      <ul>
+        {files.map(({ name }, index) => (
+          <li key={`${name}_${index.toString()}`} className={styles.file}>
+            <span className={styles.icon}><DocumentIcon /></span>
+            <span className={styles.fileName}>{name}</span>
+            <Button
+              size={Sizes.Small}
+              color={Colors.Error}
+              variant={Variants.Outlined}
+              onClick={() => handleRemove(index)}
+            >
+              Delete
+            </Button>
+          </li>
+        ))}
+      </ul>
+      )}
+      {isShowUploadBtn && (
+      <>
+        <input
+          id="fileUpload"
+          type="file"
+          onChange={handleChange}
+          multiple={isMultiple}
+          accept={accept}
+          hidden
+        />
+        <label htmlFor="fileUpload" className={styles.uploadBtn}>
+          {title}
+        </label>
+      </>
+      )}
+    </div>
+  );
+};
+
+export default UploadFiles;

src/components/UploadFiles/interfaces/IUploadFiles.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface IFile {
+  file: File,
+  src: string,
+  name: string,
+}
+
+export interface IUploadFilesProps {
+  files: IFile[],
+  title: string,
+  onChange: (files: IFile[] | IFile, event: React.ChangeEvent<HTMLInputElement>) => void,
+  isShowUploadBtn: boolean,
+  className: string,
+  onDelete: (files: IFile[] | null) => void,
+  isMultiple: boolean,
+  accept: string,
+}

src/components/UploadFiles/sass/UploadFiles.module.scss

@@ -0,0 +1,57 @@
+@import '../../../sass/colors';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+
+  input {
+    display: none;
+  }
+
+  .file {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      display: inline-flex;
+      font-size: 22px;
+      color: $lightGray;
+    }
+
+    .fileName {
+      font-size: 12px;
+      color: $primary;
+      margin: 0 16px 0 6px;
+      max-width: 215px;
+      line-break: anywhere;
+    }
+  }
+
+  .uploadBtn {
+    position: relative;
+    cursor: pointer;
+    padding: 8px 12px 8px 38px;
+    width: max-content;
+    border: 1px solid $light-gray;
+    border-radius: 4px;
+    background-color: $white;
+    color: $primary;
+    font-size: 12px;
+    line-height: 15px;
+    transition: .3s;
+
+    &:before {
+      position: absolute;
+      content: "";
+      width: 16px;
+      height: 16px;
+      left: 12px;
+      background: url("../../../assets/icons/i-upload-blue.svg") no-repeat center;
+    }
+
+    &:hover {
+      background-color: #E5F0FF;
+      border: 1px solid #E5F0FF;
+    }
+  }
+}

src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as Button } from './Button/Button';
 export { default as Bell } from './Bell/Bell';
+export { default as UploadFiles } from './UploadFiles/UploadFiles';

src/sass/colors.scss

@@ -2,6 +2,7 @@ $white: #FFF;
 $red: #FF2E2E;
 $primary: #0072FF;
 $primary-hover: #2988FF;
+$lightGray: #B7C1D4;
 $outlined-hover: #F2F8FF;
 $light-blue: #E5F0FF;
 $success: #36B37E;

src/stories/UploadFiles.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import UploadFiles from '../components/UploadFiles/UploadFiles';
+
+export default {
+  title: 'Example/UploadFiles',
+  component: UploadFiles,
+} as ComponentMeta<typeof UploadFiles>;
+
+const Template: ComponentStory<typeof UploadFiles> = (args) => <UploadFiles {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  files: [],
+};