0

I'm wondering if it's possible within puppeteer to access a FileSystemDirectoryHandle (from the File System Access API). I would like to pass in a directory path via puppeteer as though the user had selected a directory via window.showDirectoryPicker(). On my client page I use the File System Access API to write a series of png files taken from a canvas element, like:

const directoryHandle = await window.showDirectoryPicker();
for (let frame = 0; frame < totalFrames; frame++){
    const fileHandle = await directoryHandle.getFileHandle(`${frame}.png`, { create: true });
    const writable = await fileHandle.createWritable();
    updateCanvas(); // <--- update the contents of my canvas element
    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
    await writable.write(blob);
    await writable.close();
}

On the puppeteer side, I want to mimic that behavior with something like:

const page = await browser.newPage();
await page.goto("localhost:3333/canvasRenderer.html");

// --- this part doesn't seem to exist ---
const [dirChooser] = await Promise.all([
  page.waitForDirectoryChooser(),
  page.click('#choose-directory'),
]);
await dirChooser.accept(['save/frames/here']);
//--------------------------------------

but waitForDirectoryChooser() doesn't exist.

I'd really appreciate any ideas or insights on how I might accomplish this!

0 Answers0