HTML5とFileReaderを使ってSafariでフォルダのドロップを検出する方法

Safariにおけるフォルダ検出の課題

Safariブラウザは、ドラッグ＆ドロップによるフォルダのアップロードを公式にサポートしていません。そのため、ユーザーがフォルダをドロップした場合でも、通常のファイルと同じように扱われてしまい、意図しない動作を引き起こすことがあります。

この問題に対処するには、FileReader APIを活用します。フォルダを読み込もうとすると読み取りエラーが発生するため、onerrorイベントハンドラでそれを捕捉することで、フォルダがドロップされたことを検出できます。

実装コード例

以下のコードを実行すると、Safariでフォルダがドロップされたかどうかを判定できます。

Array.prototype.forEach.call(e.dataTransfer.files, function (file) {
    var r = new FileReader();
    r.onload = function (event) {
        // 通常のファイルの場合：ファイルを追加処理に渡す
        addFile(file);
    };
    r.onerror = function (event) {
        // フォルダの場合：読み込みエラーが発生する
        alert("Safariブラウザではフォルダのアップロードはサポートされていません！");
    }
    r.readAsDataURL(file);
});

コードの仕組み

このコードの処理の流れは以下の通りです。

1. ドロップされたファイルを反復処理：
e.dataTransfer.files には、ユーザーがドロップしたすべての項目が格納されています。forEach を使って各項目を順番に処理します。

2. FileReaderで読み込みを試行：
readAsDataURL() を呼び出してファイルの読み込みを開始します。通常のファイルであれば onload が発火し、addFile() 関数で後続の処理に渡されます。

3. エラーでフォルダを検出：
Safariでフォルダを読み込もうとすると読み取りに失敗し、onerror イベントが発火します。ここでアラートを表示することで、ユーザーに「フォルダのアップロードには非対応」であることを伝えられます。

補足ポイント

より丁寧なUXを提供したい場合は、alert() の代わりに画面内にメッセージを表示したり、フォルダをドロップ対象から除外して残りのファイルだけを処理したりする方法も有効です。また、ChromeやFirefoxなどでは webkitGetAsEntry() を使ってフォルダ内のファイルを再帰的に取得できるため、ブラウザごとの挙動の違いを考慮した実装をおすすめします。