JavaScript에서 File 혹은 Blob의 ArrayBuffer 확인하는 방법

요약: React(아래 코드 스니펫은 React이지만 vanilla js에서도 동일)에서 해당 파일의 binary data를 ArrayBuffer에서 확인하는 방법에 대한 간단한 내용. FileReader 생성자를 사용하는 방법과 Blob 생성자를 사용하는 방법 2가지를 소개한다.

아래 코드 스니펫은 react-dropzone 라이브러리를 사용했지만,<input type="file" /> 에서도 동일하게 사용 가능. input element를 사용하든 react-dropzone 라이브러리의 onDrop을 사용하든 array가 반환된다는 점을 숙지하고 아래 코드 스니펫을 봐야 한다.

react-dropzone을 사용한 매우 단순한 예시. react-dropzone 라이브러리의 구체적인 사용법은 공식 문서를 참고하길 바란다.
react-dropzone 공식 문서

import React, { useCallback } from "react";
import { useDropzone } from "react-dropzone";

const onDrop = useCallback((files) => {
    // files는 array이고, 파일을 한 개 drop했을 경우 files[0]으로 접근하면 된다.
}, []);

const { getRootProps, getInputProps } = useDropzone({
    onDrop
});

return (
  <div {...getRootProps()}>
      <form onSubmit={onSubmit}>
          <input {...getInputProps()} />
      </form>
  </div>
)

FileReader constructor

먼저 readAsArrayBuffer 메소드를 이용해 ArrayBuffer로 읽은 다음, onload 이벤트 핸들러가 ArrayBuffer 내의 result를 콘솔에 찍어주는 간단한 예시이다.

const attachedFileReader = new FileReader();
console.log(attachedFileReader) // readyState: 0
fileReader.onload = e => {
    console.log(e.target) // readyState: 2, result: ArrayBuffer(파일 크기 byte)
    const arrayBuffer = e.target.result;
    console.log(arrayBuffer)
}
fileReader.readAsArrayBuffer(files[0]); // loadend라는 이벤트 발생 addEventListener("loadend", e => {})로 확인 가능

Blob constructor

mdn에서는 "Note: The Blob.arrayBuffer() method is a newer promise-based API to read a file as an array buffer."라고 Blob.arrayBuffer() 메소드를 소개하고 있다. readAsArrayBuffer() 메소드는 argument를 Array로 받으며 Promise를 반환한다.

const attachedBlob = new Blob(files);
attachedBlob.arrayBuffer().then(arrayBuffer => 	console.log(arrayBuffer))