<input type = file/>에서 value 타입 맞추기(오랜만에 에러핸들링 TIL)

 

<input
  type="file"
  className={styles.hide}
  ref={dataInputRef}
  value={applicationFile}
  onChange={(e) => onUploadFile(e)}
/>

///
const onUploadFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) {
      return;
    }
    const { name, type, size } = e.target.files[0];

    // const formData = new FormData();
    // formData.append('name', name);
    // if (type.split('/')[1] !== 'xlsv' || type.split('/')[1] !== 'csv' || type.split('/')[1] !== 'json') {
    //   alert('지원하는 파일이 아니오 이걸 토스트로 바꿀것이오 걱정마시오');
    //   return;
    // }
    console.log(e.target.files);
    setApplicationFile('e.target.files');
    uploadApplicationHandler({ variables: { fileName: name } });
  };

위 코드의 input 태그에서 파일을 업로드 하고 있었다.

onChange함수인 onUploadFile에서 상태변경을 하면 자꾸 다음과 같은 에러가 났다.

한참을 뇌피셜로 이것저것 만져보다 에러를 중학교 영어교과서 해석하듯 한땀한땀 해석해보았다.

그렇다.

input file태그의 value(applicationFile)는 타입을 보니 InputHTMLAttributes<HTMLInputElement>.value 로써 value가 필요했다.

하지만 내가 setApplicationFile에 넣고있는 것은

value가 없는 객체였다.

 

에러의 원인은 value가 필요한 타입에 value가 없는 것을 넣기 때문이었다.

 

업로드하는 파일 형식을 내가 바꿀수 없다고 판단해서 InputHTMLAttributes<HTMLInputElement>.value 의 영향을 받지 않는 state를 하나 더 만들어 해결했다.

const [uploadFile, setUploadFile] = useState<File>();

 const onUploadFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) {
      return;
    }
    const { name, type, size } = e.target.files[0];

   
	//setApplicationFile(e.target.files[0]) <- 타입스크립트에 의해 컴파일에서 걸러짐   
    setUploadFile(e.target.files[0]); <- 타입을 File로 하여 재정의하니 에러 해결
    uploadApplicationHandler({ variables: { fileName: name } });
  };