実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/03/29 02:53
2024/03/29 03:24
2024/03/29 05:23