Learn Filesystem Api

9 Nov 2022

https://developer.chrome.com/articles/file-system-access/^[1]

For the test I implemented here, I pick a folder, and the web page lists all the files in that folder. This seems to be Chrome-only right now. Firefox said they think web pages accessing your local files is a bad idea, and do not plan to implement it.

/*
 * From https://www.redblobgames.com/x/2245-learn-filesystem-api/
 * @license CC0
 */
'use strict';

async function openFolder() {
    let output = document.querySelector("#output");
    let directory = await window.showDirectoryPicker();
    if (!directory) {
        output.innerText = "cancelled";
        return;
    }

    let text = "";
    for await (const [key, value] of directory.entries()) {
        let info = value.kind;
        if (value.kind === 'file') {
            let file = await value.getFile();
            let timestamp = new Date(file.lastModified);
            let date = timestamp.toISOString().slice(0, 10);
            info = `    ${date} ${file.size}bytes`;
        }
        text += `${key}: ${info}\n`;
    }
    output.innerText = text;
}

Endnotes