JSFiddle - React, Tailwind, and code Playground

by kenta_torii

HTML

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

<style>
    #droparea {
        padding: 100px 25%;
    }

    #cover {
        width: 100%;
        height: 70px;
    }
</style>

JavaScript

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("droparea")
    .addEventListener("dragover", event => {
        event.preventDefault();
    }, false);

document.getElementById("droparea")
    .addEventListener("drop", async event => {
        event.preventDefault();
        const items = event.dataTransfer.items;
        const results = [];
        const promise = [];
        for (const item of items) {
            const entry = item.webkitGetAsEntry();
            promise.push(scanFiles(entry, results));
        }
        await Promise.all(promise);
        console.log(results); //テスト表示
/*--------------------追加コード--------------------*/
        for(let result of results) {
            result.file(file => {
                const reader = new FileReader();
                reader.readAsText(file);
                reader.onload = () => {
                    console.log(result.fllPath);
                    console.log(file);
                    console.log(reader.result);
                };
            });
        }
/*-----------------------------------------------*/

    }, false);