ウェブアプリの進化に伴い、ユーザーがデスクトップからブラウザにファイルをドラッグ&ドロップして編集、アップロード、共有などができると便利なことに気づいたかもしれません。しかし残念ながら、ウェブページにフォルダをドラッグ&ドロップすることはできませんでした。幸いなことに、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 についてをご覧ください。新しいドラッグ&ドロップ機能については、こちらのドキュメントをご覧ください。もちろん、これらの機能はオープン スタンダードであるか、まもなくオープン スタンダードになる予定です。