HTMLのFile System APIを使ってローカルドライブからローカルファイルシステムへファイルをアップロードする方法

はじめに

Webアプリケーション開発では、ユーザーのローカルドライブからファイルを読み込み、クライアント側のファイルシステムに保存したいというケースがあります。HTMLとJavaScriptを組み合わせることで、この処理を実現できます。本記事では、代表的な実装方法として以下の3つを紹介します。

• webkitdirectory属性：<input type="file"> にこの属性を指定すると、専用のダイアログボックスからフォルダ（ディレクトリ）ごと選択できるようになります。
• File System API：サンドボックス化された仮想ファイルシステムを提供し、クライアントマシン上にファイルを保存できます。
• File API：<input type="file"> 要素で選択されたファイルを読み取るためのAPIです。

これらの機能はいずれもGoogle Chromeで正しく動作します。その中でも、webkitdirectory属性によるディレクトリ選択が最も扱いやすい方法です。

ディレクトリを選択する：webkitdirectory属性

<input type="file" webkitdirectory> のように記述すると、通常のファイル選択ではなくフォルダ選択モードになり、フォルダ内の全ファイルを一括で取得できます。複数ファイルをまとめてアップロードしたい場合に特に便利です。

File System APIでサンドボックス領域を確保する

クライアント側に保存領域を作成するには、webkitRequestFileSystem() を呼び出します。

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

上記のコードで使用している err と fs は、次のように定義されています。

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

コードの解説

• window.TEMPORARY：一時的なストレージ領域をリクエストします（永続化が必要な場合は window.PERSISTENT を使用します）。
• 5 * 1024 * 1024：約5MBのストレージ容量を要求しています。
• 成功時のコールバック関数内で、ファイルシステムオブジェクトを受け取り、変数 fs に格納します。
• エラー発生時には err 関数が呼ばれ、例外をスローして問題を通知します。

注意点

File System APIはサンドボックス化されているため、ブラウザが管理する専用領域以外の任意のパスにはアクセスできません。また、これらの機能は主にGoogle Chrome（WebKit／Blink系ブラウザ）でのみ動作するため、FirefoxやSafariなど他のブラウザへの対応が必要な場合は、代替手段の検討をおすすめします。