[React] input type="file" 커스터마이징 하기

 

 

이미지 업로드 버튼을 만드려면 input 태그에 type="file"을 주어야하는데

type file의 경우 브라우저에서 지정한 UI로만 사용이 가능해서 CSS수정이 불가능하다.

 

css를 변경할 수 없으니 다른 방법으로 input태그를 숨겨놓고

커스터마이징 할 버튼을 추가하여 css를 수정하는 방식으로 해결을 할 수 있다.

 

import React, { useRef } from "react";

const imageRef = useRef();
const onImageUploadClick = () => {
  imageRef.current.click();
}


// .. 생략
// 버튼영역
<input type="file" multiple hidden ref={imageRef} /> // 실제 이미지 버튼
<button onClick={onImageUploadClick}>이미지 업로드</button> // 커스터마이징 버튼

 

file input을 hidden으로 숨기고 useRef를 사용하여

버튼 클릭 시 file input에 클릭이벤트를 넣어서 마치 input을 클릭한 것 처럼 구현이 가능하다.

 

좀 더 간단하게 labal 태그로도 가능하다.

<input id="input-file" type="file" multiple hidden /> // 실제 이미지 버튼
<label for="input-file">이미지 업로드</label>

label의 for 속성을 이용해서 input과 연결해 주고

input을 숨기고 label에 CSS를 추가하여 디자인해준다.