FileReader로 브라우저에서 file 다루기

developer.mozilla.org/ko/docs/Web/API/FileReader

FileReader - Web API | MDN

 

FileReader는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다.

 

쉽게 말해 클라이언트단에서 file이랑 blob 사용할 수 있게 해준다는 겁니다.

 

canvas와 filereader를 조합하여 client side에서 이미지 리사이징을 하는 등 유용하게 사용할 수 있습니다.

 

FileReader 객체를 생성한 후 이용하는 메서드는 MDN에 따르면

readAsText, readAsDataURL, readAsArrayBuffer, readAsBinaryString입니다.

Abort 메서드는 중지이므로, 에러 났을 때 정지나, user interrupt가 발생했을 때 사용하면 됩니다.

 

 

간단한 실습 세팅 : input[type="file"]

 

우선 아래처럼 input[type="file"]을 잡아주고 onchange 이벤트를 붙여도 되고(JAM 스택의 경우) form 제출시 event를 막고 얻어도 됩니다. 

<input type="file" multiple name="pics" accept="image/*" onchange={handleChange} />

 

어쨌거나 FileList를 반환합니다. 보통 편하게 Array.from(filelist)를 넣어 배열로 변환하건, [...filelist]로 spread하여 사용하기 편하게 만듭니다. 그러나 업로드한 파일의 내용 자체는 없습니다. 파일의 내용을 확인하려면 FileReader를 이용해서 읽어봅시다.

 

EventHandler

https://developer.mozilla.org/en-US/docs/Web/API/FileReader#event_handlers

 

파일이 업로드하면 이미지를 가공하거나, 확인하는 작업을 위해서 event를 listening하고 있어야 할텐데요. 

사용할 수 있는 이벤트 핸들러는 다음과 같습니다. 물론 아래에 나열된 것 외에도 직접 addEventListener를 통해서 다른 동작에서 발생하는 이벤트를 listening할 수도 있습니다.

 

 

 

파일 리더의 상태에 따른 이벤트 핸들러

FileReader.onabort

 

FileReader.onerror

FileReader.onload

 

로딩 이벤트

 

FileReader.onload / FileReader.onloadstart / FileReader.onloadend / FileReader.onprogress

fileReader.onloadstart = () => {
  console.log("loadstart");
};

fileReader.onprogress = () => {
  console.log("onpregress");
};

fileReader.onloadend = (finishedEvent) => {
  console.log("onloadend");
};

// 아래 순으로 출력됨
// loadstart
// onpregress
// onloadend

 

 

FileReader 메서드를 이용하여 file 읽기(이미지, 비디오, 오디오, csv 파일 등등)

 

readAsText

그냥 text로 읽는 겁니다. 이미지 같은 걸 읽으면 인코딩이 되어 있지 않으므로 깨진 내용을 반환합니다.

file.onchange = function(e) {
  var fileReader = new FileReader();
  fileReader.readAsText(e.target.files[0]);
  fileReader.onload = function(e) {
    console.log(e.target.result); // 문자열
  }
}

 

 

readAsDataURL

base64로 인코딩합니다. 이미지를 다루는데 좋습니다.

file.onchange = function(e) {
  var fileReader = new FileReader();
  fileReader.readAsDataURL(e.target.files[0]);
  fileReader.onload = function(e) { 
    console.log(e.target.result); // base64 인코딩된 값
  }
}

 

 

readAsArrayBuffer

 

ArrayBuffer객체를 반환합니다. buffer니까, 데이터를 잘게 조각낸 것이고, 이를 서버에 보내서 stream으로 처리하면 됩니다. 영상, 오디오 등의 스트림 데이터를 다루는 데 좋습니다.

file.onchange = function(e) {
  var fileReader = new FileReader();
  fileReader.readAsArrayBuffer(e.target.files[0]);
  fileReader.onload = function(e) {
    console.log(e.target.result); // ArrayBuffer 객체
  }
}

 

readAsBinaryString

바이너리로 읽습니다. 처리 속도에 아주 민감하게 반응해야할 때 사용합니다. 0~255 범위의 문자열 정도에 적당하다고는 하는데 솔직히 아직은 사용해본 적이 없습니다.

file.onchange = function(e) {
  var fileReader = new FileReader();
  fileReader.readAsBinaryString(e.target.files[0]);
  fileReader.onload = function(e) {
    console.log(e.target.result);
  }
}

 

 

 

 

 

참고한 글)

 

www.zerocho.com/category/HTML&DOM/post/592827558653d6001804a0a5

w3c.github.io/FileAPI/#FileReader-interface

pks2974.medium.com/file-api-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-729fa6a3a0ba

foreachdreamcometrue.tistory.com/6

gist.github.com/ORESoftware/ba5d03f3e1826dc15d5ad2bcec37f7bf