input file undefined 문제

---

문제 발생

사진을 업로드하고 사람얼굴을 인식해서 가져오는 프로젝트를 진행중인데, 사진을 한번 넣고 다른 사진을 넣으려다가 취소를 하면 input에 undefined 가 들어오는 문제가 발생

function OnchangeHandler(event){
    const FileList = event.target.files[0]
    console.log(FileList)
  }
  return (
    <>
    <label htmlFor="input">파일을 선택하세요</label>
    <input type="file" id="input" onChange={OnchangeHandler}></input>
    </>
  )

위 코드로 테스트를 진행해 봤다.

파일을 선택하면 file은 FileList 형태로 들어간다

그후에 파일선택을 누르고 파일을 선택하지 않자,

위 사진과 같이 event.target에 파일이 들어간다

이후에 파일선택 버튼을 여러번 누르고 취소를 해도 target이 바뀌지 않았다.

문제해결

정답은 FileList에 있었다.

파일을 선택한 후에 취소 버튼을 누르면 리스트를 빈배열로 채운다

그런데 나는 files[0]으로 설정하여 빈배열에 인덱스를 가리키니까 에러가 발생했던 것이다

const FileList = event.target.files

위 코드로 실행하면

에러없이 실행되는것을 볼 수 있다.

그렇다면 undefined가 에러를 방지하기 위해서는 FileList가 0보다 클때 files[0]에 접근해주면 된다.

아래는 해결 코드이다.

const FileList = event.target.files 
    if(FileList.length >0 )
    {
      console.log(FileList[0])
    }

참고자료

https://developer.mozilla.org/ko/docs/Web/API/FileList