ブラウザからJavaScriptを用いて、ドラッグ&ドロップされた複数のディレクトリから、内部のファイル情報を取得する

###質問
まず以下のコードをみてください

JavaScript
1            async function scanFiles(entry, tmpObject) {
2                switch (true) {
3                    case (entry.isDirectory) :
4                        console.log(entry);
5                        const entryReader = entry.createReader();
6                        const entries = await new Promise(function (resolve) {
7                            entryReader.readEntries(function (entries) { resolve(entries); });
8                        });
9                        await Promise.all(entries.map(function (entry) { scanFiles(entry, tmpObject); }));
10                        break;
11                    case (entry.isFile) :
12                        tmpObject.push(entry);
13                        break;
14                }
15            }
16
17            document.getElementById("dropzone")
18                    .addEventListener("dragover", function (event) {
19                        event.preventDefault();
20                    }, false);
21
22            document.getElementById("dropzone")
23                    .addEventListener("drop", async function (event) {
24                        event.preventDefault();
25                        const items = event.dataTransfer.items;
26                        const results = [];
27                        const uuid = uuidGenerate();
28                        for (const item of items) {
29                            const entry = item.webkitGetAsEntry();
30                            await scanFiles(entry, results);
31                        }
32                        console.log(results);
33                    }, false);

このコードはブラウザ内でdropzoneに指定された範囲にファイル、またはディレクトリをドラッグ&ドロップすると、そこに含まれるファイル情報のみを取得し表示するモノです。この時、ファイルならば単数、複数に対応できるんですが、ディレクトリになると単数の時のみしか動かなくなります。複数与えると、名前順に見て一番最初のディレクトリのみに対して単数の時と同じ挙動をします。
これをどうにかして、ディレクトリが複数の時でも動くようにしたいです。items.lengthを取得すると、何個ドラッグ＆ドロップされたか表示することができるのですが、ディレクトリを複数指定した時には、個数はしっかり取得できています。
どうかご教授お願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

event.dataTransfer loses its items inside setTimeout function - Stack Overflow

どうやらevent.dataTransfer.itemsはdropイベントのハンドラーが終了すると同時に空になってしまうようです。

今の場合、

js
1                        for (const item of items) {
2                            const entry = item.webkitGetAsEntry();
3                            await scanFiles(entry, results);
4                        }

で1周目でawaitするため2週目以降は非同期的に実行され、そのときにはitemsは空になっている、というのが今回の問題の原因です。

FileEntry.file method makes dataTransferItemList empty - Stack Overflow
↑この方法ではdropイベントのハンドラー内で同期的にevent.dataTransfer.itemsのすべてアイテムについて.webkitGetAsEntry()を実行してFileSystemEntryをすべて先にゲットしてしまうという方法をとっています。これにならうと、

js
1document.getElementById("dropzone")
2  .addEventListener("drop", async function(event) {
3    event.preventDefault();
4    const entries = [];
5    for (let i = 0; i < event.dataTransfer.items.length; i++) {
6    	entries.push(event.dataTransfer.items[i].webkitGetAsEntry());
7    }
8    
9    const results = [];
10    for (const entry of entries) {
11    	await scanFiles(entry, results);
12    }
13    console.log(results);
14  }, false);

もしくは、scanFiles(entry, results)をパラレルに実行していいなら、for文を同期的にして、Promiseの配列を作り、その後Promise.allですべての完了を待つということもできます。

js
1document.getElementById("dropzone")
2  .addEventListener("drop", async function(event) {
3    event.preventDefault();
4    const items = event.dataTransfer.items;
5    const results = [];
6    const promises = [];
7    for (const item of items) {
8      const entry = item.webkitGetAsEntry();
9      promises.push(scanFiles(entry, results));
10    }
11    await Promise.all(promises);
12    console.log(results);
13  }, false);