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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

527閲覧

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

mmmseng

総合スコア2

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

3クリップ

投稿2023/03/23 13:41

編集2023/03/24 06:34

実現したいこと

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

shinoharat👍を押しています

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

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

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

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

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

YakumoSaki

2023/03/24 01:44

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

2023/03/24 02:32

【1】動作確認時の環境を教えてください。 ・OSは何を使っているか? ・ブラウザは何を使っているか? ・ローカルサーバーを立ち上げているのか?それともローカルのHTMLファイルを直接ブラウザで開いているのか? 【2】以下のURLにアクセスし、「Drop Files Here」にフォルダをドロップしたとき、フォルダの中身が表示されるか確認してみてください。 https://developer.mozilla.org/ja/docs/Web/API/DataTransferItem/webkitGetAsEntry#%E7%B5%90%E6%9E%9C
mmmseng

2023/03/24 02:45

コメントをいただきありがとうございます。 エラー文と該当コードを追記いたしました。 YakumoSakiさん Qiitaのコードは問題なく動くのですが、私がやりたいことはディレクトリの中身を表示するのみではなく、ファイルをFileListに追加したいのです。 shinoharatさん 【1】動作確認時の環境を教えてください。 ・OSは何を使っているか? →macです。 ・ブラウザは何を使っているか? →googlecromです。 ・ローカルサーバーを立ち上げているのか?それともローカルのHTMLファイルを直接ブラウザで開いているのか? →ローカルサーバーを立ち上げてます。 【2】以下のURLにアクセスし、「Drop Files Here」にフォルダをドロップしたとき、フォルダの中身が表示されるか確認してみてください。 →中身は表示されます。 また、同様に中身の表示は添付した参考サイトでできています。 ただ、ファイル名を取得したいのではなく、ファイルオブジェクトを取り出して、FileList(DataTransfer)に追加したいのです。
shinoharat

2023/03/24 04:59 編集

追記ありがとうございます。 Transfer.items.add(entry); を Transfer.items.add(item.getAsFile()); に変えるとどうなりますか?
mmmseng

2023/03/24 05:26

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

2023/03/24 06:17

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

2023/03/24 06:31

一旦は添付した参考サイトの通り、下記の場合で色々と試しています。 ※下記参考コードの”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

2023/03/24 06:35

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問