[JS] File API

HTML5 부터 브라우저는 File API 지원하기 시작한다.

File API 는 아래와 같이 정의되어 있다.

• FileList : 파일 리스트
• File : 파일 데이터
• FileReader : 파일 읽기
• Blob : 바이트 데이터

간단예제

    const captureProfile = (event) => {
        event.stopPropagation();
        event.preventDefault();
        const file = event.target.files[0];
        let reader = new window.FileReader();
        reader.readAsArrayBuffer(file);
        let inputId = event.target.id;
        reader.onloadend = () => {
            convertToBuffer(reader, inputId);
        };
    };

    const convertToBuffer = async (reader, inputId) => {
        const buffer = await Buffer.from(reader.result);
        let uploadImage = URL.createObjectURL(
            new Blob([buffer], { type: 'image/png' }
            ));
        if (inputId === 'uploadId') {
            setProfile(uploadImage);
        }
        else if (inputId === 'bannerUpload') {
            setBanner(uploadImage);
        }
    };

해당 예제는 input[type=file] 로 입력받은 파일을 converToBuffer 함수에 props를 전달하여 Buffer 배열을

Binary Large Object 객체를 만들어 프로필 이미지를 변경하는 예제이다.

 

input file type

기본적으로 브라우저에서는 보안상 로컬 파일에 직접 접근 할 수 없다.

input[type=file] 는 브라우저에서 유저가 직접 로컬의 파일을 선택할 수 있게 도와준다.

https://html.spec.whatwg.org/multipage/input.html#file-upload-state-%28type=file%29

HTML Standard

이렇게 선택한 파일은 File 로 정의되고 FileList 에 담기게 된다.

이때 multiple 설정 여부와 관계없이 ArrayLike 형태인 FileList 로 담긴다.

파일을 선택하면 input, change EventHandler 가 발생되며, 선택된 파일은 HTMLInputElement.files 에 저장된다.

oninput 와 onchange 는 input.files 이 변경될때, 발생하는 점은 유사 하다.

유일한 차이점은 onchange 는 포커스를 잃을 때 발생하고, oninput 은 요소 값이 변경된 직후에 발생한다.

때문에 순서상으로 oninput 이 먼저 발생한다.

input 의 속성

input[type=file] 은 value, accept, capture, files, multiple 속성을 갖을 수 있다.

• value [DOMString] : 파일 경로
• accept [MIME] : 사용 가능한 파일 종류
• capture [string] : 파일 캡처 방법
• multiple [boolean] : 여러 파일 선택 여부
• files [FileList] : 선택된 파일들

input.value

input[type=file] value 에는 파일의 경로를 가진다.

브라우저에서는 보안상 로컬 파일에 직접 접근 할 수 없으며, 로컬 파일 구조의 노출을 막고자 C:\fakepath\ 를 포함하여, 숨긴다.

이 경로의 브라우저마다 구현된 형태가 다를 수 있다.

https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly

HTML Standard

input.accept

input[type=file] accept 는 선택 가능한 파일 종류를 설정할 수 있다.

파일은 , 로 구분하며, 아래와 같은 형태로 작성할 수 있다.

• accept="image/*" : png 같은 이미지파일
• accept="video/*" : mp4 같은 동영상파일
• accept="audio/*" : wav 같은 오디오파일
• accept=".pdf, .doc, .csv" : pdf, doc, css 확장자 파일

input.capture

input[type=file] capture 는 모바일 같은 특정 기기에서 capture 방법을 설정할 수 있다.

• capture="camera" : 카메라
• capture="camcorder" : 동영상
• capture="microphone" : 마이크

capture 속성을 지원하지 않는 브라우저의 경우, accept="image/*;capture=camera" 으로 사용할 수도 있다.

<!--html-->
<input id="camera"
 type="file"
 capture="camera"
 accept="image/*;capture=camera"
/>

FileList

input.files 에는 선택한 파일들을 FileList 로 가진다.

FileList 는 File 들을 가지는 객체이며, { [index]: File, length: number } 형태를 가진 array-like object 이다.

FileList[index] 혹은 FileList.item(index) 형태로 File 에 접근할 수 있다.

이 FileList 는 Symbol(Symbol.iterator) 가 정의되어 있어, 순차적으로 참조하기 위해서, for of 를 사용할 수 있다.

혹은 Array.from() 로 변환하여 참조 할 수 있다.

// javascript
function (event) {
  var fileList = event.target.files;
  for(const file of fileList) {
    // ...
  }
  Array.from(fileList).forEach((file) => {
    // ...
  })
};

File

브라우저는 보안상 파일을 조작할 수 없다. 때문에 모든 값은 읽기 전용 이다.

File 은 아래 속성을 가질 수 있다.

• name : 파일 이름
• lastModified : 파일을 마지막으로 수정한 Unix Time
• lastModifiedDate : 파일을 마지막으로 수정한 Date 객체
• size : 파일의 크기 (Byte 값)
• type : MIME 유형

File
name: "htm_20190729104652375824.jpg"
lastModified: 1586075186723
lastModifiedDate: Sun Apr 05 2020 17:26:26 GMT+0900 (대한민국 표준시) {}
size: 54973
type: "image/jpeg"