React에서 File 선택버튼 꾸미기

File 선택버튼 만들기

React에서 File을 업로드하는 기능을 구현하기 위해서는 다음과 같이 Input 컴포넌트를 이용해 구현합니다.

<input type="file" multiple onChange={onSaveFiles}/>

그러면 다음과 같은 결과물이 나타납니다.

하지만 이쁘지도 않고 만들고 있는 서비스에 어울리지 않을 수 있습니다.

그래서 어떻게 꾸며야할지 알아보니 다음과 같이 구현할 수 있습니다.

새로운 버튼 만들기

우선 첫번째로, 위에서 구현한 File input의 css에서 display: none;으로 수정해 숨겨줍니다.

그리고 File input의 Ref를 설정합니다.

const fileUploadBtnRef = useRef(null);

...

<input style={{display: "none"}} type="file" ref={fileUploadBtnRef} multiple onChange={onSaveFiles}/>

그다음 다음과 같이 원하는 스타일의 버튼을 추가해줍니다.

이때 버튼을 클릭 한 경우 File input의 Ref를 이용해 다음과 같이 Click Event를 호출해 파일을 선택할 수 있도록 구현하면

원하는 스타일의 파일 선택 버튼을 구현할 수 있습니다!

React

import {FiPaperclip} from 'react-icons/fi';

<button className='IconBtn'
        onClick={() => fileUploadBtnRef.current.click()}
>
  <FiPaperclip className='Icon'/>
</button>

CSS

.IconBtn {
  width: 40px;
  height: 40px;
  font-size: 20px;

  margin: 3px;
  border: none;
  padding: 5px;

  border-radius: 10px;

  color: white;
  background-color: #87CEED;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.IconBtn:hover {
  background-color: #87CEEDAA;
}

이제 다음과 같은 스타일의 버튼을 만들었고 클릭하면 다음 이미지와 같이 파일 선택화면이 나타나도록 구현했습니다!