Browse Source
Server-side native folder pickers cannot select a Windows user's local directory when the app is deployed remotely. This adds a browser File System Access path for supported browsers so the user can choose a local folder, create the project subfolder, and save the workflow JSON directly from the client. Constraint: File System Access handles are browser-only and cannot be passed to server filesystem APIs Constraint: External media folder storage still depends on server filesystem endpoints, so browser-local projects keep media embedded or remote in the workflow JSON Rejected: Make /api/browse-directory choose the user's Windows folder | that endpoint runs on the server, not in the browser Confidence: medium Scope-risk: moderate Directive: Extend the browser filesystem utility for local media inputs/generations before enabling external media storage for browserfs paths Tested: npx vitest run src/components/__tests__/ProjectSetupModal.test.tsx src/components/__tests__/Header.test.tsx Tested: npm run build Not-tested: Manual Chrome/Edge File System Access flow on Windows test serverhandoff-20260429-1057
jiajia
3 months ago
4 changed files with 218 additions and 17 deletions
@ -0,0 +1,164 @@ |
|||
"use client"; |
|||
|
|||
import type { WorkflowFile } from "@/store/workflowStore"; |
|||
|
|||
const PREFIX = "browserfs://"; |
|||
const DB_NAME = "popiart-browser-file-system"; |
|||
const DB_VERSION = 1; |
|||
const STORE_NAME = "directory-handles"; |
|||
|
|||
type BrowserDirectoryRecord = { |
|||
id: string; |
|||
handle: FileSystemDirectoryHandle; |
|||
}; |
|||
|
|||
type PermissionMode = "read" | "readwrite"; |
|||
|
|||
type FileSystemPermissionDescriptor = { |
|||
mode?: PermissionMode; |
|||
}; |
|||
|
|||
type PermissionedDirectoryHandle = FileSystemDirectoryHandle & { |
|||
queryPermission?: (descriptor?: FileSystemPermissionDescriptor) => Promise<PermissionState>; |
|||
requestPermission?: (descriptor?: FileSystemPermissionDescriptor) => Promise<PermissionState>; |
|||
}; |
|||
|
|||
declare global { |
|||
interface Window { |
|||
showDirectoryPicker?: () => Promise<FileSystemDirectoryHandle>; |
|||
} |
|||
} |
|||
|
|||
const memoryHandles = new Map<string, FileSystemDirectoryHandle>(); |
|||
|
|||
export function isBrowserFileSystemPath(path: string | null | undefined): boolean { |
|||
return typeof path === "string" && path.startsWith(PREFIX); |
|||
} |
|||
|
|||
export function isBrowserDirectoryPickerSupported(): boolean { |
|||
return typeof window !== "undefined" && typeof window.showDirectoryPicker === "function"; |
|||
} |
|||
|
|||
export function joinBrowserFileSystemPath(basePath: string, folderName: string): string { |
|||
return `${basePath.replace(/\/+$/, "")}/${encodeURIComponent(folderName)}`; |
|||
} |
|||
|
|||
export async function pickBrowserWorkflowDirectory(): Promise<string | null> { |
|||
if (!isBrowserDirectoryPickerSupported() || !window.showDirectoryPicker) return null; |
|||
|
|||
const handle = await window.showDirectoryPicker(); |
|||
await ensurePermission(handle, "readwrite"); |
|||
const id = `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`; |
|||
memoryHandles.set(id, handle); |
|||
await putDirectoryRecord({ id, handle }); |
|||
return `${PREFIX}${id}`; |
|||
} |
|||
|
|||
export async function writeBrowserWorkflowFile( |
|||
directoryPath: string, |
|||
filename: string, |
|||
workflow: WorkflowFile |
|||
): Promise<{ filePath: string }> { |
|||
const directoryHandle = await resolveDirectoryHandle(directoryPath, true); |
|||
await ensurePermission(directoryHandle, "readwrite"); |
|||
|
|||
await directoryHandle.getDirectoryHandle("inputs", { create: true }); |
|||
await directoryHandle.getDirectoryHandle("generations", { create: true }); |
|||
|
|||
const safeName = filename.replace(/[^a-zA-Z0-9-_]/g, "_"); |
|||
const fileName = `${safeName}.json`; |
|||
const fileHandle = await directoryHandle.getFileHandle(fileName, { create: true }); |
|||
const writable = await fileHandle.createWritable(); |
|||
await writable.write(JSON.stringify(workflow, null, 2)); |
|||
await writable.close(); |
|||
|
|||
return { filePath: `${directoryPath}/${fileName}` }; |
|||
} |
|||
|
|||
async function resolveDirectoryHandle(path: string, create: boolean): Promise<FileSystemDirectoryHandle> { |
|||
const parsed = parseBrowserFileSystemPath(path); |
|||
let handle = await getDirectoryHandleById(parsed.id); |
|||
await ensurePermission(handle, "readwrite"); |
|||
|
|||
for (const segment of parsed.segments) { |
|||
handle = await handle.getDirectoryHandle(segment, { create }); |
|||
} |
|||
|
|||
return handle; |
|||
} |
|||
|
|||
function parseBrowserFileSystemPath(path: string): { id: string; segments: string[] } { |
|||
if (!isBrowserFileSystemPath(path)) throw new Error("Not a browser file-system path"); |
|||
|
|||
const parts = path |
|||
.slice(PREFIX.length) |
|||
.split("/") |
|||
.filter(Boolean) |
|||
.map((part) => decodeURIComponent(part)); |
|||
|
|||
const id = parts[0]; |
|||
if (!id) throw new Error("Browser directory handle is missing"); |
|||
|
|||
return { id, segments: parts.slice(1) }; |
|||
} |
|||
|
|||
async function getDirectoryHandleById(id: string): Promise<FileSystemDirectoryHandle> { |
|||
const cached = memoryHandles.get(id); |
|||
if (cached) return cached; |
|||
|
|||
const record = await getDirectoryRecord(id); |
|||
if (!record) { |
|||
throw new Error("Browser folder permission was lost. Choose the folder again."); |
|||
} |
|||
|
|||
memoryHandles.set(id, record.handle); |
|||
return record.handle; |
|||
} |
|||
|
|||
async function ensurePermission(handle: FileSystemDirectoryHandle, mode: PermissionMode): Promise<void> { |
|||
const permissioned = handle as PermissionedDirectoryHandle; |
|||
if (!permissioned.queryPermission || !permissioned.requestPermission) return; |
|||
|
|||
const descriptor = { mode }; |
|||
const current = await permissioned.queryPermission(descriptor); |
|||
if (current === "granted") return; |
|||
|
|||
const requested = await permissioned.requestPermission(descriptor); |
|||
if (requested !== "granted") { |
|||
throw new Error("Folder permission was not granted."); |
|||
} |
|||
} |
|||
|
|||
function openDb(): Promise<IDBDatabase> { |
|||
return new Promise((resolve, reject) => { |
|||
const request = indexedDB.open(DB_NAME, DB_VERSION); |
|||
request.onupgradeneeded = () => { |
|||
request.result.createObjectStore(STORE_NAME, { keyPath: "id" }); |
|||
}; |
|||
request.onsuccess = () => resolve(request.result); |
|||
request.onerror = () => reject(request.error); |
|||
}); |
|||
} |
|||
|
|||
async function putDirectoryRecord(record: BrowserDirectoryRecord): Promise<void> { |
|||
const db = await openDb(); |
|||
await new Promise<void>((resolve, reject) => { |
|||
const tx = db.transaction(STORE_NAME, "readwrite"); |
|||
tx.objectStore(STORE_NAME).put(record); |
|||
tx.oncomplete = () => resolve(); |
|||
tx.onerror = () => reject(tx.error); |
|||
}); |
|||
db.close(); |
|||
} |
|||
|
|||
async function getDirectoryRecord(id: string): Promise<BrowserDirectoryRecord | null> { |
|||
const db = await openDb(); |
|||
const record = await new Promise<BrowserDirectoryRecord | null>((resolve, reject) => { |
|||
const tx = db.transaction(STORE_NAME, "readonly"); |
|||
const request = tx.objectStore(STORE_NAME).get(id); |
|||
request.onsuccess = () => resolve((request.result as BrowserDirectoryRecord | undefined) ?? null); |
|||
request.onerror = () => reject(request.error); |
|||
}); |
|||
db.close(); |
|||
return record; |
|||
} |
|||
Loading…
Reference in new issue