파일 탐색기 버튼 input type='file' 커스텀하여 사용하기

 

사실 인풋 자체를 커스텀한다기 보단 꼼수를 쓰는 것이라고 할 수 있다.

인풋 자체도 커스텀할 수 있지만 제한적인 면이 있는 듯 하다.

const fileInput = useRef();

// jsx return부분
<input type="file" style={{display: 'none'}} onChange={handleInputChange} ref={fileInput}></input>
<StEditButton onClick={handleEditButtonClick}>edit</StEditButton>

파일 탐색기 input과 눌렀을때 탐색기가 열리게할 버튼(StEditButton)을 만든다.

파일 탐색기 버튼 input에 useRef로 참조를 걸어준다.

 

const handleInputChange = e => {};

  const handleEditButtonClick = () => {
    fileInput.current.click();
  };

그런 다음 내가 만든 StEditButton 버튼이 클릭되면

클릭이벤트 함수로 fileInput 참조 변수에 click 함수를 적용하여 파일 탐색기 버튼이 클릭되게 한다.

 

그럼 프로필 이미지 위의 edit 버튼을 누르면 파일 탐색기 버튼이 열리게된다.