React Handsontable로 csv 편집기 만들기 (4)

프로젝트 전체 링크

 

이전 - (3) 선택한 경로의 파일 불러오기

현재 - (4) Drop한 파일 읽기

다음 - (5) 선택한 경로의 파일 읽기

 

깃허브에서 코드 확인하기

---

이제 drop한 file을 읽어서 console에 출력해보자.

 

library.js에서 불필요한 로그는 지운다.

그리고 handleOnDrop에서 매개 변수 e (event 객체)가 무엇인지 출력해보자.

// library.js

...

export const handleOnDrop = (e, setState) => {
  e.preventDefault();

  console.log(e);

  setState(false);
  return false; 
};

 

file을 drop하면 event 객체가 출력된다.

 

event 객체를 펼여보면 여러 값들이 있다.

여기에서 dataTransfer object에 우리가 읽어야할 file의 정보를 얻을 수 있다.

 

dataTransfer object를 펼쳐보면 아래의 files에서 file을 읽을 수 있다.

 

file에 대한 정보를 아래 변수에 담자. file이 하나만 있으므로 files에서 0번 배열만 가져오면 된다.

let file = e.dataTransfer.files[0];
console.log(file);

 

마찬가지로 file을 출력해보면, drop한 파일에 대한 정보가 출력된다.

(test.csv라는 파일을 drop하였고, File의 name이 test.csv인 것을 알 수 있다.)

 

하지만 파일의 정보가 아니라 파일의 내용이 필요하다.

따라서 자바스크립트 File API의 FileReader를 이용하여 파일의 정보를 읽는다.

let fileReader = new FileReader();
fileReader.readAsText(file, "euc-kr"); // or utf-8
console.log(reader)

 

현재 사용할 csv파일(test.csv)은 아래와 같다. 

test.csv를 drop하고 reader를 출력해보자.

 

FileReader의 result에 test.csv의 내용이 담겨있는 것을 알 수 있다.

 

참고로 다른 file을 drop하였을 때 아래와 같이 글자가 깨지는 경우가 있다.

이런 경우 readAsText에서 utf-8로 변경하면 대부분 해결된다.

fileReader.readAsText(file, "utf-8"); // or euc-kr

여기에서도 utf-8로 계속 유지하도록 하자.

---

다시 fileReader로 돌아가서 result를 출력해보자.

fileReader.result를 console로 출력하면 null이 들어간다.

let fileReader = new FileReader();
fileReader.readAsText(file, "utf-8"); // or euc-kr
console.log(fileReader);
console.log(fileReader.result);

 

파일을 읽는 작업이 비동기 처리이기 때문에 발생하는 현상이다.

FileReader의 onload()를 이용하면 읽기 동작이 완료되었을 때 원하는 정보를 출력할 수 있다.

fileReader.readAsText(file, "utf-8"); // or euc-kr
console.log(fileReader);
console.log(fileReader.result); // null

fileReader.onload = function () {
  console.log(fileReader.result); 
  return;
};

 

test.csv가 정상 출력된 것을 알 수 있다.

최종 handleOnDrop은 아래를 참고하자.

// library.js

...

export const handleOnDrop = (e, setState) => {
  e.preventDefault();

  console.log(e);
  let file = e.dataTransfer.files[0];
  console.log(file);
  let fileReader = new FileReader();
  fileReader.readAsText(file, "utf-8"); // or euc-kr
  console.log(fileReader);
  console.log(fileReader.result); // null
  
  fileReader.onload = function () {
    console.log(fileReader.result); 
    return;
  };

  setState(false);
  return false; 
};

---

이전 - (3) 선택한 경로의 파일 불러오기

다음 - (5) 선택한 경로의 파일 읽기