Chrome にフォルダをドラッグ&ドロップできるようになりました

Eiji Kitamura

ウェブアプリの進化に伴い、ユーザーがデスクトップからブラウザにファイルをドラッグ＆ドロップして編集、アップロード、共有できるようにすることが便利だと感じたことがあるかもしれません。しかし、残念ながら、ウェブページにフォルダをドラッグ＆ドロップすることはできませんでした。幸い、Chrome 21 以降ではこの問題は解決されます（Chrome Dev チャンネルではすでに利用可能です）。

ドラッグ＆ドロップで複数のファイルを渡す

既存のドラッグ＆ドロップのコードサンプルを見てみましょう。

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.files.length;
    for (var i = 0; i < length; i++) {
    var file = e.dataTransfer.files[i];
    ... // do whatever you want
    }
};

この例では、実際にデスクトップからブラウザにファイルやフォルダをドラッグ&ドロップできますが、フォルダを渡そうとすると、拒否されるか、File オブジェクトとして扱われ、失敗します。

ドロップされたフォルダを処理する方法

Chrome 21 では、フォルダや複数のフォルダをブラウザ ウィンドウにドロップできるようになりました。これらの問題に対処するには、ドロップされたオブジェクトの処理方法を変更する必要があります。

<div id="dropzone"></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
    var length = e.dataTransfer.items.length;
    for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
        ... // do whatever you want
    } else if (entry.isDirectory) {
        ... // do whatever you want
    }
    }
};

ここでの大きな違いは、getAsEntry（webkitGetAsEntry）という新しい関数を使用して、ドロップされたオブジェクトを Entry（FileEntry または DirectoryEntry）として扱うことができる点です。Entry オブジェクトにアクセスしたら、FileSystem API 仕様で導入された標準のファイル処理メソッドを使用できます。たとえば、次の例は、.isFile（または .isDirectory）フィールドを調べて、ドロップされたオブジェクトがファイルかディレクトリかを検出する方法を示しています。

FileSystem API の詳細については、FileSystem API の概要をご覧ください。新しいドラッグ＆ドロップ機能については、こちらのドキュメントをご覧ください。もちろん、これらの機能はオープン スタンダードの一部であるか、まもなくオープン スタンダードの一部になる予定です。