file API

file API는 단순 텍스트 데이터 뿐만 아니라 이미지, 오디오, 비디오 등의 대용량 바이너리 데이터를 다루기 위한 API이다.

구체적으로 File API는 Blob, File, FileReader, FileList 객체로 구성되어 있다.

Blob : 주로 파일 형태가 아닌, 바이너리 데이터를 다룬다.
File : Blob을 상속받는 객체로, 주로 파일 형태의 바이너리 데이터를 다룬다.
FileReader : File이나 Blob에 저장된 바이너리 데이터를 읽어들이는 객체이다.
FileList : HTML Input 엘리먼트를 통해 입력 받은 파일을 저장하는 유사 배열 객체이다.

---

Blob

MIME Type의 바이너리 데이터를 저장하는 객체이다.
Blob 자체가, 대용량 바이너리 데이터 객체를 의미한다.
-> 텍스트, 이미지, 오디오, 비디오 데이터를 다룰 수 있다.

실제 사용시에는 주로 파일 형태가 아닌 바이너리 데이터를 다룬다.
-> 마이크 소리, 카메라 영상, 화면

File

File 객체란 자바스크립트에서 파일을 다루기 위한 객체로 Blob을 상속받는다.

이를 위해서 파일을 다루는 데 필요한 name, lastModifiedData 프로퍼티가 추가되어 있다.
-> 따라서 Blob으로 할 수 있는 모든 것을 할 수 있으며, Blob을 요구하는 모든 곳에 사용될 수 있다.

File은 주로 파일 형태의 바이너리 데이터를 다룬다.

File 생성 방법

1. 생성자

   new File(source배열, name, {type : "text/plain"});

   -> source 배열 : 파일에 저장할 데이터이다. ArrayBuffer, ArrayBufferView, Blob, DOMString을 요소로 하는 배열을 입력
   -> name : 파일명이나 파일의 경로를 나타내는 USVString
   -> option 객체 : type(디폴트는 ""), lastModified(디폴트는 Date.now())

2. Input 엘리먼트 등을 통해 취득

   <input type = "file">

FileList

file 엘리먼트를 통해 파일을 선택하면 onChange 이벤트가 발생하는데, input엘리먼트.files로 FileList 배열 객체를 참조할 수 있다.

FileList 배열에는 선택한 파일이 순서대로 File 객체 형태로 저장되어 있다.
만약, 파일이 1개만 선택된 경우라면 FileList[0]에 File 객체 저장

FileReader

File이나 Blob 객체가 저장하고있는 바이너리 데이터를 비동기로 읽어주는 객체이다.

데이터를 읽는 방식에 따라 4가지 메서드가 제공된다.

1. FileReader.prototype.readAsArrayBuffer(File | Blob)
   -> File이나 Blob의 바이너리 데이터를 읽어서 ArrayBuffer로 반환

2. FileReader.prototype.readAsBinaryString(File | Blob)
   -> File이나 Blob의 바이너리 데이터를 읽어서 String으로 반환

3. FileReader.prototype.readAsDataURL(File | Blob)
   -> File이나 Blob의 바이너리 데이터를 읽어서 객체 URL로 반환

4. FileReader.prototype.readAsText(File | Blob)
   -> File이나 Blob의 바이너리 데이터를 읽어서 텍스트로 반환

읽기가 완료되면 FileReader 객체에 load 이벤트가 발생하고, FileReader객체.result로 결과물을 참조할 수 있다.

// 1. Blob 객체 생성(File객체도 사용 가능)
const blob = new Blob(["안녕하세요", "카레유", "입니다"]);

// 2. FileReader 객체 생성
const fileReader = new FileReader();

// 3. FileReader로 Blob 데이터를 텍스트로 읽어들이기
fileReader.readAsText(blob);

// 4. FileReader 읽기 작업 완료 이벤트 처리
fileReader.onload = (event)=>{

// 5. FileReader가 읽은 내용 확인
   console.log(fileReader.result); // "안녕하세요카레유입니다"
}

---

참고 레퍼런스