[React/Typescript] Button onClick, useRef로 파일 업로드 하기 (input type='file', label 사용x)

 

React로 파일 업로드 하는 법을 검색해보면

input 태그와 label태그를 활용해서 하는 코드가 많이 나온다.

나는 이미 코드에 커스텀해둔 버튼이 있어서, 

해당 태그를 label로 감싸거나 해당 태그 안쪽에 label을 넣든 뭘해도 작동하지 않았다.

 

그래서 onChange로 input태그 ref에 접근하여 파일 업로드 하는 방식으로 구현을 했다.

이때 react로만 개발하면 useRef에 타입지정을 다로 하지 않아도 잘 실행이 되나,

나는 프로젝트에서 typescript를 쓰고있기 때문에 타입을 지정해주지 않으면 타입 에러가 났고,

아래 코드로 해결했다.

 

코드

import { useRef } from "react";

//구현해둔 Button ui를 누르면 input type=file이 클릭돼서(.click())/파일선택창 열림

const Card = () => {
  const selectedFiles = useRef<HTMLInputElement>(null); 
  // TS에선 HTMLInputElement라고 타입 지정을 해주지 않으면 에러남

  return (
  <>
  	{/* 버튼 ui */}
    <Button
          variant={'ghost'}
          sizeVariant={'sm'}
          typeVariant={'icon'}
          tooltip={`Add Attachment`}
          onClick={() => selectFile.current?.click()} //input에 접근하기 위한 useRef
        >
      <Paperclip className="w-4 h-4" />
    </Button>
    {/* 파일 업로드 input 태그 */}
    <input 
        ref={selectedFiles}  //ref 연결
        type={'file'} 
        className="hidden" // display:none
        multiple={true}  //파일 여러개 선택 가능하도록
     />
   </>
  );
};

export default Card;

 

 

화면 :