質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2477閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

ドラッグ&ドロップ

コンピューターのGUIにおいて、バーチャルなものを「つかむ」ことによって選択し、別の場所や他のバーチャルなものの上に動かす行為、またはその行為に対応していることを指す。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/05/27 05:30

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

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を取得すると、何個ドラッグ&ドロップされたか表示することができるのですが、ディレクトリを複数指定した時には、個数はしっかり取得できています。
どうかご教授お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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);

投稿2018/05/27 06:50

編集2018/05/27 06:55
karamarimo

総合スコア2553

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/05/27 07:04

event.dataTransfer.itemsが空になることに気がつけませんでした。 ありがとうございました。
退会済みユーザー

退会済みユーザー

2018/05/27 07:04

event.dataTransfer.itemsが空になることに気がつけませんでした。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問