Input File Button

import { useRef, useState } from "react";
import styled from "styled-components";
import IconFile from "../element/icon/IconFile";
import IconPlus from "../element/icon/IconPlus";
import InputButton from "./InputButton";

export default function InputFileButton({
  className,
  onChange,
  isMultiple,
  text = "Upload File",
  acceptType = ".jpg,.jpeg,.png",
  showFileList = true,
  style,
}) {
  const inputRef = useRef(null);
  const [fileList, setFileList] = useState([]);

  const handleFileChange = (e) => {
    const files = e.target.files;
    if (isMultiple) {
      const tmpFiles =
        Object.keys(files)?.length > 0
          ? [...fileList, ...files]
          : [...fileList];
      setFileList(tmpFiles);
      if (onChange) {
        onChange(tmpFiles);
      }
    } else {
      setFileList([files[0]]);
      if (onChange) {
        onChange(files[0]);
      }
    }
  };

  return (
    <Styled style={style} className={className}>
      <div className="wrp-upload-file">
        <input
          className="wrp-input"
          type="file"
          ref={inputRef}
          onChange={handleFileChange}
          accept={acceptType}
          multiple={isMultiple ? true : false}
        />
        <InputButton
          onClick={() => {
            inputRef.current.click();
          }}
          className={"btn-up-file"}
        >
          <>
            <IconFile
              width="30"
              className={"icon-file"}
              color="var(--txt-bright)"
            />
            {text}
          </>
        </InputButton>
      </div>

      {showFileList && fileList?.length > 0 && (
        <ul className="file-list">
          {fileList.map((file, index) => (
            <li key={index} className="file-item">
              <span>{file.name}</span>
              <div
                className="btn-remove"
                onClick={() => {
                  if (isMultiple) {
                    let tmp = [...fileList];
                    tmp.splice(index, 1);
                    setFileList([...tmp]);
                    if (onChange) {
                      onChange([...tmp]);
                    }
                  } else {
                    setFileList([]);
                    if (onChange) {
                      onChange(null);
                    }
                  }
                }}
              >
                <IconPlus
                  degree="45"
                  className={"icon"}
                  color="var(--txt-normal)"
                />
              </div>
            </li>
          ))}
        </ul>
      )}
    </Styled>
  );
}

const Styled = styled.div`
  display: inline-block;
  width: ${({ buttonWidth }) => buttonWidth};
  position: relative;
  .btn-up-file {
    color: var(--txt-bright);
  }

  .wrp-upload-file {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .wrp-input {
      display: none;
    }
  }
  .file-list {
    padding-top: 10px;
    .icon-file {
      position: relative;
      top: 2px;
    }
    .file-item {
      display: flex;
      align-items: center;
      margin: 0 10px 10px 0;
    }
    .btn-remove {
      margin-left: 20px;
      position: relative;
      top: 3px;
      cursor: pointer;
    }
  }
`;

import InputFileButton from "../../example/InputFileButton";

export default function TestView() {
  return (
    <div className="test-view">
      <InputFileButton
        isMultiple
        onChange={(e) => console.log(e)}
      />
    </div>
  );
}