HTML Filesystem API로 로컬 드라이브의 파일을 로컬 파일 시스템에 업로드하는 방법

웹 브라우저 환경에서 로컬 드라이브의 파일을 로컬 파일 시스템으로 업로드하려면, 아래와 같은 웹 API들을 활용할 수 있습니다.

활용 가능한 주요 API

1. webkitdirectory 속성

<input type="file"> 요소에 webkitdirectory 속성을 추가하면, 사용자가 폴더(디렉터리) 선택 대화상자를 통해 폴더 전체를 한 번에 선택할 수 있습니다.

2. Filesystem API

Filesystem API는 샌드박스(sandboxed) 방식의 파일 시스템입니다. 이를 통해 클라이언트 머신 내 격리된 공간에 파일을 안전하게 저장할 수 있습니다.

3. File API

File API를 사용하면 파일의 내용을 읽을 수 있습니다. 선택된 파일은 <input type="file"> 요소를 통해 접근할 수 있습니다.

위에서 소개한 기능들은 모두 Google Chrome에서 정상적으로 작동합니다.

디렉터리 접근 예제 코드

여러 방법 중에서도 WebKit directory 방식이 가장 안정적이고 효율적인 선택지입니다. 디렉터리 파일 시스템에 접근하려면 다음과 같이 코드를 작성합니다.

webkitRequestFileSystem(
    window.TEMPORARY, 5 * 1024 * 1024, function(_fs) {
        fs = _fs;
    },
err)

위 코드에서 사용된 fs와 err 변수는 다음과 같이 정의됩니다.

var fs,
err = function(err) {
    throw err;
};

이처럼 window.TEMPORARY 스토리지 타입과 용량 제한(위 예제에서는 5MB)을 지정하여 임시 파일 시스템을 요청하고, 성공 콜백에서 파일 시스템 객체를 받아 사용하면 됩니다.