[Javascript] input要素(file)で、ディレクトリを丸ごと選択する

こんにちは、@yoheiMuneです。
今日はinputのfileタグで、ディレクトリを選択したり、その情報をJSで読み取ったりする方法をブログに書きたいと思います。

目次

inputのfileタグでディレクトリを指定可能にする

2017年2月現在ChromeとFirefox（バージョン50以上）で、<input type="file"/>でディレクトリ選択をすることができます。具体的には以下のようにwebkitdirectory属性を追加します。

<input id="file" type="file" name="upfile[]" webkitdirectory>

これだけでディレクトリ選択ができるようになります、すごいですね。

Javascriptで内容を読み取る

ディレクトリでファイル選択されたものは、以下のようにJSから読み取ることができます。

document.getElementById('file').addEventListener('change', ev => {

    for (let i = 0; i < ev.target.files.length; i++) {

        let file = ev.target.files[i];

        // ディレクトリの相対パス
        let relativePath = file.webkitRelativePath;

        // ここではテキストファイルとして読み出してみる.
        let fileReader = new FileReader();
        fileReader.onload = event => {
            
            // 内容を取得する.
            let text = event.target.result;

            // 表示してみる.
            console.log(relativePath, text);
        }
        fileReader.readAsText(file);
    }
});

と、こんな感じで、ディレクトリ内の相対パスの取得や、ファイルの中身を見ることができます。なお、ファイル内容がバイナリーの場合には、例えば以下のようにして読みだすことができます。

// バイナリーデータをDataURL形式で読み込む.
let fileReader = new FileReader();
fileReader.onload = event => {
    let data = event.target.result;
}
fileReader.readAsDataURL(file);

例えば、以下のようなディレクトリ構造のものをアップロードすると、

• data/
• a.txt（中身は「aaa」）
• b.txt（中身は「ccc」）
• sub/
• c.txt（中身は「ccc」）

以下のような出力となります。

data/a.txt aaa
data/b.txt bbb
data/sub/c.txt ccc

サンプルは以下におきましたので、もし良ければお試しください。
https://github.com/yoheiMune/frontend-playground/blob/master/017-directory-upload/index.html

サーバーで受け取る

サーバーで受け取るところは、以下のQiitaがわかりやすかったので、そちらをご参照ください。ディレクトリ構造（ファイルの相対パス）は渡せないみたいなので、その辺はうまくやる必要があるみたいですね。
http://qiita.com/akase244/items/f5f7287cfe28bebe00fc

最後に

ディレクトリをそのままアップできるのは嬉しいですね。その辺もFlashなしで動かせるようになると素敵です。

最後になりますが本ブログでは、Linux・フロントエンド・インフラ・Go言語・Node.js・Python・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！