ブラウザに対しディレクトリをドラッグ&ドロップした際の挙動

Question

###目的
現在ファイルやディレクトリを扱うWebサービスの開発をしています。
その過程でブラウザにディレクトリを複数単数問わずドラッグ＆ドロップする処理が必要になりました。
ブラウザ側でディレクトリをドラッグ＆ドロップされたとき、サーバー側には、ディレクトリ内で階層構造になっているファイルのみを取得し、ドラッグ＆ドロップされたディレクトリをルートディレクトリとして、ファイル毎のフルパスとファイルそのもののデータを送る処理を作りたいです。

###質問
以前もこちらで、上記仕組みに関する質問をさせていただき、現在ディレクトリ内のファイル毎のフルパスを取得することができました。
ただ、どうやってもファイル本体のデータを送信することができません。取得できているかの確認すらできていません。
どのように処理をつくると、サーバー側にファイルを送ることができますか？

具体的には、GoogleDriveのような処理をつけたいということです。

###コード
こちらが、一連の処理に関わるコードになります。

            function uploadFile(fileObject) {
                let fileBinary = new FormData();
                for (let i = 0; i < fileObject.length; i++) {
                    fileBinary.append("file[]", fileObject[i]);
                }
                console.log(fileObject);
                $.ajax({
                    url: ' ',
                    type: 'POST',
                    contentType: false,
                    processData: false,
                    data: fileObject,
                    timeout: (1000 * 1800)
                }).done(data => {
                    console.log("success!");
                    console.log(data);
                }).fail(err => {
                    console.log("Oops!");
                    console.log(err);
                });
            }

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

            document.getElementById("dropzone")
                    .addEventListener("dragover", event => {
                        event.preventDefault();
                    }, false);

            document.getElementById("dropzone")
                    .addEventListener("drop", async event => {
                        const items = event.dataTransfer.items;
                        const results = [];
                        const promise = [];
                        event.preventDefault();
                        for (const item of items) {
                            const entry = item.webkitGetAsEntry();
                            promise.push(scanFiles(entry, results));
                        }
                        await Promise.all(promise);
                        console.log(results);
                    }, false);

        <div id="dropzone">
                <button class="btn btn-primary btn-block" id="cover" data-toggle="collapse" data-target="#collapseSample1">
                    ここにファイルを
                    <br>
                    ドロップしてください
                </button>
        </div>

            #dropzone {
                text-align: center;
                width: 1000px;
                height: 70px;
                margin: 10px;
                padding: 10px;
                border-radius: 10px;
            }

この処理ではuploadFileは呼ばれていませんが、uploadFileに適切なオブジェクトを与え、バイナリデータがサーバー(PHP)に送られ、$_FILEで取得できるところまでできるようにしたいです。
ajaxのurlは意図的に未記入にしています。実際はサーバのURLを記入し、すでにデータを送って試しています。

###試したこと
dropのEventListener内に、

const files = event.dataTransfer.files;
uploadFile(files);

と与えると、ファイルの時は期待する動作をしてくれるのですが、ディレクトリには対応してくれません。

###追記
「サーバー側には、ディレクトリ内で階層構造になっているファイルのみを取得し、ドラッグ＆ドロップされたディレクトリをルートディレクトリとして、ファイル毎のフルパスとファイルそのもののデータを送る」
とかいてありますが、サーバー側でのデータ管理は、
フルパス:ファイルデータ
のようになっており、実際に扱われているディレクトリなどの階層構造のようなものではないため、送りたいデータがフルパスとファイルデータである、という理由です。

###追・追記

 const reader = new FileReader();
                        const files = event.dataTransfer.files;
                        console.log(files);
                        reader.onload = () => {
                            console.log(reader.result);
                        };
                        reader.readAsText(files[0]);
                        reader.readAsText(results[0]);

のコードをdropのEventListenerのコードの、下部のconsole.logの下に追加し、実行したところ、filesの方はテキストを表示できているのに対し、resultsの方はblobじゃないとエラーが出ました。
もしかしてdataTransfer.itemsではファイルBlobは取得できないのでしょうか、、、

Comments

[m.ts10806]

FormData();\　←これはコピペミスでしょうか？

[退会済みユーザー]

申し訳ございません。コピペミスです、修正します。

Answer 1

自己解決いたしました。scanFile内の以下のcaseにて、

case (entry.isFile) :
    tmpObject.push(entry);
    break;

entryに対しfileメソッドを呼ぶとファイルの中身を取得できました。

entry.file(file => {
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = () => {
        console.log(reader.result);
    };
});

Answer 2

<input type="file">でもディレクトリごと送ることはできないので
難しいと思います

Comments

[退会済みユーザー]

難しかったです。
ですが、しっかりこのAPIのドラフトを読み込み、自己解決することができました。