diff --git a/packages/docs/site/docs/10-javascript-api/06-mount-data.md b/packages/docs/site/docs/10-javascript-api/06-mount-data.md new file mode 100644 index 0000000000..fd56ad03f2 --- /dev/null +++ b/packages/docs/site/docs/10-javascript-api/06-mount-data.md @@ -0,0 +1,15 @@ +# Mount data + +## Mount a directory from the browser + +You can mount a directory from the browser to Playground using the `window.showDirectoryPicker` API. Check the [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker#browser_compatibility) before using this API. + +```javascript +window.showDirectoryPicker().then(function (directoryHandle) { + window.parent.postMessage({ + type: 'mount-directory-handle', + directoryHandle, + mountpoint: '/wordpress/wp-content/uploads/markdown/', + }); +}); +``` diff --git a/packages/playground/remote/src/lib/boot-playground-remote.ts b/packages/playground/remote/src/lib/boot-playground-remote.ts index 24fa00624f..d75a3162e4 100644 --- a/packages/playground/remote/src/lib/boot-playground-remote.ts +++ b/packages/playground/remote/src/lib/boot-playground-remote.ts @@ -9,7 +9,7 @@ import { exposeAPI, consumeAPI, setupPostMessageRelay, - SyncProgressCallback + SyncProgressCallback, } from '@php-wasm/web'; import type { PlaygroundWorkerEndpoint } from './worker-thread'; @@ -221,6 +221,7 @@ export async function bootPlaygroundRemote() { wpFrame, getOrigin((await playground.absoluteUrl)!) ); + setupMountListener(playground); if (withNetworking) { await setupFetchNetworkTransport(workerApi); } @@ -242,6 +243,27 @@ function getOrigin(url: string) { return new URL(url, 'https://example.com').origin; } +function setupMountListener(playground: WebClientMixin) { + window.addEventListener('message', async (event) => { + if (typeof event.data !== 'object') { + return; + } + if (event.data.type !== 'mount-directory-handle') { + return; + } + if (typeof event.data.directoryHandle !== 'object') { + return; + } + if (!event.data.mountpoint) { + return; + } + await playground.bindOpfs({ + opfs: event.data.directoryHandle, + mountpoint: event.data.mountpoint, + }); + }); +} + function parseVersion(value: string | undefined | null, latest: T) { if (!value || value === 'latest') { return latest as string;