TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. 에러

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

파이어베이스에서 FileReader 에러가 날 때 대처법

• input을 통해 이미지 업로드시, 이미지 선택 후 취소 버튼을 누르면 나는 오류이다.
  input에 걸려있는 함수는 그대로 작동을 하지만, 실제로 파일이 없기에 애러가 나타남

e.target.file 을 체크 해보니, 파일의 업로드 시 e.target.file의 length가 1 업로드를 취소 한 경우 0이 나오게 된다.

기존코드


 const handleImageChange = (e: any) => {
   const {
     target: { files },
   } = e;
   const theFile = files[0];
   const reader = new FileReader();
   reader?.readAsDataURL(theFile);
   reader.onloadend = (finishedEvent) => {
     const {
       currentTarget: { result },
     }: any = finishedEvent;
     setImageUpload(result);
   };
 };

변경코드
  const handleImageChange = (e: any) => {
    const file: any = e.target.files; // 이부분을 추가함 if Else를 넣어줌
    if (file.length === 0) {  
      return;
    } else {
      const {
        currentTarget: { files },
      } = e;

      const theFile = files[0];
      const reader = new FileReader();
      reader?.readAsDataURL(theFile);
      reader.onloadend = (finishedEvent) => {
        const {
          currentTarget: { result },
        }: any = finishedEvent;
        setImageUpload(result);
      };
    }
  };