리액트 같은 이름의 파일 재업로드 (같은 파일 다시 열기)

리액트 전체 링크

 

참고

- React Handsontable로 csv 편집기 만들기 (5) - 선택한 파일 경로 읽기

 

위의 글에서 파일을 업로드할 때, 기존 파일, 또는 같은 이름의 파일을 올릴 경우,

onChange는 data가 변경될 경우에만 동작하므로, 아무 event도 발생하지 않는다.

<input type="file" accept=".csv" onChange={(e) => lib.handleUpload(e)}/>

 

따라서 upload를 한 후, 파일을 얻은 후에, 초기화 하는 작업이 필요하다.

export const handleUpload = (e) => {
  let file = e.target.files[0];
  let fileReader = new FileReader();
  
  if(file === undefined) return; /* 방어 코드 추가 */
    
  fileReader.readAsText(file, "utf-8"); // or euc-kr

  fileReader.onload = function () {
    console.log(fileReader.result); 
  };
  
  e.target.value = ""; // 같은 파일 upload를 위한 처리
}

 

파일을 read 한 후, e.target.value에 빈 문자열을 넣어 초기화하였다.