ドラッグ&ドロップでフォルダ選択し、フォルダの中身を取り出したい

Question

実現したいこと

JQueryで
”FileSystemオブジェクトをDataTransferItemオブジェクトに変換”または”FileSystemオブジェクトをFileListに追加”したいです。

前提

ドラッグ&ドロップでフォルダを複数選択できるようにしました。
しかし、フォルダがそのまま表示されてしまい、中身のファイルが取り出せなくて困っています。

ちなみに、inputタグでファイル選択ボタンとフォルダ選択ボタンを作成し、フォルダ選択ボタンからフォルダ選択した場合は、選択したフォルダのファイル一覧がデフォルトで？取得できるようです。

発生している問題・エラーメッセージ

単純に”FileSystemオブジェクトをFileListに追加”すると、fileを受け取るはずが、ないよと言われ追加できません。

エラー文追記：Uncaught (in promise) TypeError: Failed to execute 'add' on 'DataTransferItemList': parameter 1 is not of type 'File'

該当のソースコード

参考にしているサイトは、こちらです。
[参考サイト]https://qiita.com/wannabe/items/2b2f59a626313a8f58d4
以下、参考サイトそのままのコード

async function scanFiles(entry, tmpObject) {
    switch (true) {
        case (entry.isDirectory) :
            let entryReader = entry.createReader();
            let entries = await new Promise(resolve => {
                entryReader.readEntries(entries => resolve(entries));
            });
            await Promise.all(entries.map(entry => scanFiles(entry, tmpObject)));
            break;
        case (entry.isFile) :
            tmpObject.push(entry);
            break;
    }
}

以下、実現したいコード

function fileObject(items, Transfer) {

    for (let item of items) {

        let entry = item.webkitGetAsEntry();

        if (entry.isDirectory) {

            // 省略

        } else if (entry.isFile) {

            Transfer.items.add(entry);  // 該当コード

        }

    }

}


let Transfer = new DataTransfer()
$('~').on('drop', function (e) {

    e.preventDefault();

    let items = e.originalEvent.dataTransfer.items;

    console.log(fileObject(items, Transfer))

})

試したこと

DataTransferオブジェクトを”.webkitGetAsEntry()”でFileSystemオブジェクトに変換して、ファイルの中身を取り出して、そのオブジェクトをFileListに追加みましたが、”fileを受け取るはずが、ない”とエラーになりました。

補足情報（FW/ツールのバージョンなど）

FileReaderでフォルダの中身を取り出せないか、参考サイトを探していますが、見つけられていません。
どなたかご存知の方がいらっしゃいましたら、教えていただきたいです。

Comments

[YakumoSaki]

手元のFirefox 111 で試した所、参考にされているQiitaのコードは正しく動作しているように思えます。
動かないと思われるコードを質問に追加していただくと答えがもらえるかもしれません。
また、「”fileを受け取るはずが、ない”」というエラーも原文を貼っていただいた方が回答に近づきます。

[shinoharat]

【１】動作確認時の環境を教えてください。

・OSは何を使っているか？
・ブラウザは何を使っているか？
・ローカルサーバーを立ち上げているのか？それともローカルのHTMLファイルを直接ブラウザで開いているのか？

【２】以下のURLにアクセスし、「Drop Files Here」にフォルダをドロップしたとき、フォルダの中身が表示されるか確認してみてください。

https://developer.mozilla.org/ja/docs/Web/API/DataTransferItem/webkitGetAsEntry#%E7%B5%90%E6%9E%9C

[mmmseng]

コメントをいただきありがとうございます。
エラー文と該当コードを追記いたしました。

YakumoSakiさん
Qiitaのコードは問題なく動くのですが、私がやりたいことはディレクトリの中身を表示するのみではなく、ファイルをFileListに追加したいのです。

shinoharatさん
【１】動作確認時の環境を教えてください。

・OSは何を使っているか？
→macです。
・ブラウザは何を使っているか？
→googlecromです。
・ローカルサーバーを立ち上げているのか？それともローカルのHTMLファイルを直接ブラウザで開いているのか？
→ローカルサーバーを立ち上げてます。
【２】以下のURLにアクセスし、「Drop Files Here」にフォルダをドロップしたとき、フォルダの中身が表示されるか確認してみてください。
→中身は表示されます。
また、同様に中身の表示は添付した参考サイトでできています。
ただ、ファイル名を取得したいのではなく、ファイルオブジェクトを取り出して、FileList（DataTransfer）に追加したいのです。

[shinoharat]

追記ありがとうございます。

Transfer.items.add(entry);
を
Transfer.items.add(item.getAsFile());
に変えるとどうなりますか？

[mmmseng]

ドラッグ&ドロップしたものがファイルであっても、フォルダであっても、Transfer.items.add(item.getAsFile());は、エラー出ずに処理されます。また、単純にTransfer.items.add(item);も処理されます。
問題は、フォルダの時にitem（及びitem.getAsFile()）をTransfer.itemsにaddすると、フォルダのままFileListに追加されてしまい、それを保存すると保存できないことです。
そのため、ドラッグ&ドロップしたフォルダは、中のファイルオブジェクトを取り出してFileListに追加したいのです。

[shinoharat]

たびたびすみません。
省略されている　if (entry.isDirectory) { ... }　の中身はどのようなコードになっているのでしょうか？

[mmmseng]

一旦は添付した参考サイトの通り、下記の場合で色々と試しています。
※下記参考コードの”tmpObject”は”tmpObject = []”です。
async function scanFiles(entry, tmpObject) {
switch (true) {
case (entry.isDirectory) :
const entryReader = entry.createReader();
const entries = await new Promise(resolve => {
entryReader.readEntries(entries => resolve(entries));
});
await Promise.all(entries.map(entry => scanFiles(entry, tmpObject)));
break;
case (entry.isFile) :
tmpObject.push(entry);
break;
}
}

ただ、Promiseやasyncがよくわからないので、これをJqueryでPromiseやasyncを使用せず、ごく単純な記述に修正したいと考えていますが、読み取りに時間がかかり、コードがまだ書けていないため、現状は参考サイトを丸写しのコードを使用しています。
やりたいことは同じで、ディレクトリの場合は、ディレクトリ内のファイルを取得し、ファイルが取れたらリストに追加していくコードになります。
また、この参考サイトでは単純な空のリストにファイル名を追加しているのですが、やりたいことは、質問に記載したコードの通り、DataTransferItemオブジェクトのリストに追加していきたいのです。

[mmmseng]

コードが見にくかったので、質問の該当のソースコード欄にも追記しております。