Mount a directory from the browser

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/',
+	});
+});
+```

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<T>(value: string | undefined | null, latest: T) {
 	if (!value || value === 'latest') {
 		return latest as string;