ドラック&ドロップされたファイルをFileSystemFileHandle型にして、配列で保持したい

実現したいこと

Javascriptでドラックアンドドロップでファイルとフォルダーを操作するアプリを目指して実装しています。

ドロップされたファイルをFile System APIを使い後々保存処理につなげたいです。
※今回は保存処理は問題ではないです。
保存の前処理としてドロップされたファイルのFileSystemFileHandle型を配列で保持しようとしています。

発生している問題・分からないこと

複数ファイルがドロップされたら、event.dataTransfer.itemsでファイル情報を得るためのループを回します。
FileSystemFileHandle型へ変換する

javascript
1const handle = await promiseHandler.getAsFileSystemHandle()

の実行以降(arrayAfter)と以前(arrayBefore)ではpushの挙動が微妙に違うのが何故だかわからないです。
arrayBefore　→ 想定通り値が入っている。
handles → やりたいこと、配列が入っているようで[0]で参照できないので実態は入っていない。コンソールだと▼で展開すると値が入っているように見える。
arrayAfter → handlesと同じで配列の中身がない、arrayBeforeと同じになってもいいと思うがならない

不明点
コンソールだと▼で展開すると値が入っていて実際は参照できない状態がよくわからないです。全部解決までいかなくてもそれだけでも教えていただけると助かります。　→ご回答いただきました。

やりたいこと

getAsFileSystemHandle()実行後もちゃんとpushで値が入ってくれるようにしたいです。

下記のコードと同じですが動作サンプルです。

該当のソースコード

javascript
1document.addEventListener('DOMContentLoaded', () => {
2  const dropArea = document.getElementById('drop-area')
3
4  dropArea.addEventListener('dragover', (event) => {
5    event.preventDefault();
6  });
7
8  dropArea.addEventListener('drop', async (event) => {
9  const handles = []
10  const arrayBefore = []
11  const arrayAfter = []
12
13    event.preventDefault();
14    const promiseHandlers = [...event.dataTransfer.items]
15    promiseHandlers.forEach(async (promiseHandler) => {
16//前でpushする
17      for (let i = 0; i < 2; i++) {
18        arrayBefore.push(i);
19      }
20      const handle = await promiseHandler.getAsFileSystemHandle()
21      handles.push(handle)
22//後でpushする
23      for (let i = 0; i < 2; i++) {
24        arrayAfter.push(i);
25      }
26    })
27      console.log('arrayBefore',arrayBefore);
28      console.log('arrayBefore[0]',arrayBefore[0]);// [0]
29      console.log('handles',handles);
30      console.log('handles[0]',handles[0]);// undefined
31      console.log('arrayAfter',arrayAfter);
32      console.log('arrayAfter[0]',arrayAfter[0]); // undefined
33  });
34});
35

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

promiseHandlers.forEachをforEachではなく、mapで回して返すようにしたらうまくいきましたが、
だんだん他の処理も入れたり複雑になってしまったのでpushでもできるようになって欲しいです。

補足

MDNのgetAsFileSystemHandle例のコード

javascript
1// すべてのアイテムを処理する
2  for (const item of e.dataTransfer.items) {

上記だと複数ファイルのとき一つのファイルしか取れないので配列に変換してループしています。

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

回答1件

ベストアンサー

forEach() は非同期処理を待ったりしないので、そのあとの console.log() は getAsFileSystemHandle() が完了する前に実行されます。ループ中の非同期処理を全て完了するまで待つには、Promise.all() が便利です。

js
1const handles = await Promise.all(promiseHandlers.map(
2    promiseHandler => promiseHandler.getAsFileSystemHandle()));

▼で展開すると値が入っていて実際は参照できない状態

コンソールでオブジェクトを▼で展開した場合、展開された時点での値が表示されます。console.log() 実行時の値ではありません。

投稿2024/03/29 00:32

int32_t

総合スコア20916

dotQ

2024/03/29 02:53

早めの回答大変助かります。ありがとうございます。 >forEach() は非同期処理を待ったりしないそうだったのですね。ありがとうございます。 for文なら待ちますか？コードもありがとうございます。一行で書けていてとても素敵です。 >コンソールでオブジェクトを▼で展開した場合、展開された時点での値が表示されます。console.log() 実行時の値ではありません。 console.log()実行時はawait待ちで実行されていないから空で、実際に▼をクリックした時点だと全て処理が終わっているので値が入っているということですね。一番困惑した部分なのでとてもスッキリしました。ありがとうございます。