Save back to the opened file where the browser allows it

Chrome and Edge open files through the File System Access API (picker and
drag & drop), so Ctrl+S overwrites the original file like PDF-XChange and
Save As shows a save dialog. Other browsers keep downloading. Writing
failures fall back to a download. After a save, later saves rebuild the
file instead of reusing the bytes from opening.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H1UeohehDf7pyxWyDSZgJg

Author: claude

README.md

@@ -129,6 +129,7 @@ How it works: `src/lib/content/` parses the content stream, interprets it with a
 
 ### Document & output
 - ✅ New blank document, open (picker or drag & drop), save, save as, save flattened copy, print
+- ✅ Save writes back to the opened file in Chrome and Edge (File System Access API; the browser asks once for write access), Save As shows a save dialog there; other browsers download the file
 - ✅ Unchanged documents are saved byte-for-byte (signatures and encryption stay intact)
 - ✅ Document properties (title, author, subject, keywords, creator, producer)
 - ✅ Export the current page as PNG

ROADMAP.md

@@ -10,7 +10,7 @@ The feature list of PDF-XChange Editor (and Editor Plus), and where PDF-Xploder
 |---|---|
 | Add Placeholder Tool | ⬜ |
 | Enhanced 3D Plugin | ⬜ (3D/PRC rendering is a large separate project) |
-| Enhanced Open/Save File Dialog Boxes | 🟡 browser file dialogs; drag & drop to open |
+| Enhanced Open/Save File Dialog Boxes | 🟡 system open/save dialogs; Save writes back to the opened file in Chrome/Edge (download elsewhere); drag & drop to open |
 | FreeSign Tool | 🟡 signature images (drawn, typed or uploaded) as comments |
 | Optimize Document Enhancements | ⬜ |
 | Search Feature for Files in Cloud Storage | 🚫 needs cloud accounts (see section 11) |

src/App.tsx

@@ -124,7 +124,7 @@ function Welcome() {
       className={`welcome ${over ? 'drag-over' : ''}`}
       onDragOver={(e) => { e.preventDefault(); setOver(true); }}
       onDragLeave={() => setOver(false)}
-      onDrop={(e) => { e.preventDefault(); setOver(false); cmd.openFiles(Array.from(e.dataTransfer.files)); }}
+      onDrop={(e) => { e.preventDefault(); setOver(false); cmd.openDropped(e.dataTransfer); }}
     >
       <div className="welcome-card">
         <h1>PDF-Xploder</h1>

src/components/Viewer.tsx

@@ -3,7 +3,7 @@ import { styleFor, uid, useStore } from '../store/store';
 import { can } from '../store/permissions';
 import { pdfToView, viewRectToPdf, viewSize, type VRect } from '../lib/geometry';
 import { PageView } from './PageView';
-import { openFiles } from '../store/commands';
+import { openDropped } from '../store/commands';
 import type { TextMarkupKind } from '../lib/types';
 
 const GAP = 16;
@@ -247,7 +247,7 @@ export function Viewer() {
         if (!e.dataTransfer.files.length) return;
         e.preventDefault();
         setDragOver(false);
-        openFiles(Array.from(e.dataTransfer.files));
+        openDropped(e.dataTransfer);
       }}
     >
       {/* A different document gets fresh page views, so nothing of the previous one can linger. */}

src/lib/fileAccess.ts

@@ -0,0 +1,99 @@
+/**
+ * File System Access API (Chrome, Edge): open files with a handle so Save can write
+ * back to the original file, like a desktop editor. Other browsers fall back to
+ * the file input and downloads.
+ */
+
+type Mode = { mode: 'read' | 'readwrite' };
+type PickerType = { description: string; accept: Record<string, string[]> };
+
+interface Pickers {
+  showOpenFilePicker?(o: { types: PickerType[]; multiple?: boolean; excludeAcceptAllOption?: boolean }): Promise<FileSystemFileHandle[]>;
+  showSaveFilePicker?(o: { types: PickerType[]; suggestedName?: string; excludeAcceptAllOption?: boolean }): Promise<FileSystemFileHandle>;
+}
+
+interface PermissionHandle {
+  queryPermission?(o: Mode): Promise<PermissionState>;
+  requestPermission?(o: Mode): Promise<PermissionState>;
+}
+
+const PDF_TYPES: PickerType[] = [{ description: 'PDF', accept: { 'application/pdf': ['.pdf'] } }];
+
+const pickers = () => (typeof window === 'undefined' ? {} : (window as unknown as Pickers));
+
+/** Whether Save can write to the opened file in this browser. */
+export const canSaveInPlace = () => typeof pickers().showSaveFilePicker === 'function';
+
+export interface PickedFile {
+  file: File;
+  handle: FileSystemFileHandle | null;
+}
+
+/** The user cancelled a picker. */
+export const isAbort = (e: unknown) => e instanceof DOMException && e.name === 'AbortError';
+
+/** Show the open picker. Returns null when the API is unavailable (use a file input instead), [] on cancel. */
+export async function pickPdfHandles(): Promise<PickedFile[] | null> {
+  const open = pickers().showOpenFilePicker;
+  if (!open) return null;
+  try {
+    const handles = await open.call(window, { types: PDF_TYPES, multiple: true });
+    return Promise.all(handles.map(async (handle) => ({ file: await handle.getFile(), handle })));
+  } catch (e) {
+    if (isAbort(e)) return [];
+    // Blocked (e.g. in a cross-origin frame): let the caller use the file input.
+    return null;
+  }
+}
+
+/** Show the save picker. Returns null when unavailable, undefined on cancel. */
+export async function pickSaveHandle(suggestedName: string): Promise<FileSystemFileHandle | null | undefined> {
+  const save = pickers().showSaveFilePicker;
+  if (!save) return null;
+  try {
+    return await save.call(window, { types: PDF_TYPES, suggestedName });
+  } catch (e) {
+    if (isAbort(e)) return undefined;
+    return null;
+  }
+}
+
+/**
+ * Handles for dropped files, in the order of `dataTransfer.files`.
+ * Must be called synchronously inside the drop event: the items expire afterwards.
+ */
+export function droppedHandles(dt: DataTransfer): Promise<(FileSystemFileHandle | null)[]> {
+  const items = Array.from(dt.items).filter((i) => i.kind === 'file');
+  type Item = DataTransferItem & { getAsFileSystemHandle?(): Promise<FileSystemHandle | null> };
+  const pending = items.map((i) =>
+    (i as Item).getAsFileSystemHandle
+      ? (i as Item).getAsFileSystemHandle!()
+          .then((h) => (h && h.kind === 'file' ? (h as FileSystemFileHandle) : null))
+          .catch(() => null)
+      : Promise.resolve(null),
+  );
+  return Promise.all(pending);
+}
+
+/** Ask for write access (prompts the user once per file and session). Call early, while the click still counts as a user gesture. */
+export async function ensureWritable(handle: FileSystemFileHandle): Promise<boolean> {
+  const h = handle as FileSystemFileHandle & PermissionHandle;
+  try {
+    if ((await h.queryPermission?.({ mode: 'readwrite' })) === 'granted') return true;
+    if (!h.requestPermission) return true; // Let createWritable decide.
+    return (await h.requestPermission({ mode: 'readwrite' })) === 'granted';
+  } catch {
+    return false;
+  }
+}
+
+export async function writeToHandle(handle: FileSystemFileHandle, data: Uint8Array): Promise<void> {
+  const w = await handle.createWritable();
+  try {
+    await w.write(data);
+  } catch (e) {
+    await w.abort().catch(() => {});
+    throw e;
+  }
+  await w.close();
+}

src/locales/de/ui.ts

@@ -328,6 +328,8 @@ const DE: Record<string, string> = {
   Documents: 'Dokumente', 'Close others': 'Andere schließen', 'Close tabs to the right': 'Rechte Tabs schließen', 'Close all': 'Alle schließen',
   'Middle click': 'Mittelklick', 'Unsaved changes': 'Ungespeicherte Änderungen', 'Open…': 'Öffnen…',
   '“{name}” has unsaved changes. Close it anyway?': '„{name}“ hat ungespeicherte Änderungen. Trotzdem schließen?',
+  'Saved to {name}': 'Gespeichert in {name}',
+  'Could not write to the file, so a copy was downloaded instead.': 'Die Datei konnte nicht geschrieben werden, daher wurde stattdessen eine Kopie heruntergeladen.',
 };
 
 export default DE;

src/store/commands.ts

@@ -7,6 +7,7 @@ import { viewRectToPdf, viewSize } from '../lib/geometry';
 import { encrypt, reencryptLike } from '../lib/security';
 import { requirePermission } from './permissions';
 import { tf, tr } from '../lib/i18n';
+import { droppedHandles, ensureWritable, pickPdfHandles, pickSaveHandle, writeToHandle } from '../lib/fileAccess';
 import { signPdf, type SignOptions } from '../lib/signature';
 import { openPdf, renderToCanvas } from '../lib/pdfjs';
 import type { Annotation, Rect } from '../lib/types';
@@ -20,15 +21,26 @@ export function targetPages(): number[] {
 }
 
 /** Open PDF files, each in its own tab (like PDF-XChange). */
-export async function openFiles(files: File[]) {
-  const pdfs = files.filter((f) => f.type === 'application/pdf' || /\.pdf$/i.test(f.name));
+export async function openFiles(files: File[], handles: (FileSystemFileHandle | null)[] = []) {
+  const pdfs = files.map((file, i) => ({ file, handle: handles[i] ?? null })).filter(({ file: f }) => f.type === 'application/pdf' || /\.pdf$/i.test(f.name));
   if (!pdfs.length) return S().notify('Please choose a PDF file.', 'error');
-  for (const f of pdfs) {
-    await S().run('Opening…', async () => S().openInNewTab(await fileBytes(f), f.name));
+  for (const { file: f, handle } of pdfs) {
+    await S().run('Opening…', async () => S().openInNewTab(await fileBytes(f), f.name, { handle }));
   }
 }
 
+/** Open dropped files, keeping their file handles where the browser provides them. Call from the drop event itself. */
+export function openDropped(dt: DataTransfer) {
+  const files = Array.from(dt.files);
+  void droppedHandles(dt).then((handles) => openFiles(files, handles.length === files.length ? handles : []));
+}
+
 export async function openFromDialog() {
+  const picked = await pickPdfHandles();
+  if (picked) {
+    if (picked.length) await openFiles(picked.map((p) => p.file), picked.map((p) => p.handle));
+    return;
+  }
   const files = await pickFile('application/pdf,.pdf', true);
   if (files.length) await openFiles(files);
 }
@@ -55,7 +67,7 @@ export async function buildOutput(flatten = false): Promise<Uint8Array> {
  */
 export async function buildFileForSave(): Promise<Uint8Array> {
   const s = S();
-  if (!s.dirty && s.originalBytes) return s.originalBytes;
+  if (unchangedSinceOpen()) return s.originalBytes!;
   const out = await buildOutput();
   if (s.securityChanged) return s.security ? encrypt(out, s.security) : out;
   // Untouched security: encrypt exactly like the opened file (works without the owner password).
@@ -70,15 +82,43 @@ function confirmBreakingSignatures(): boolean {
   return confirm(tr('This document is digitally signed. Saving your changes rewrites the file, which invalidates the existing signatures. Continue?'));
 }
 
-export async function save() {
-  if (!S().bytes || !confirmBreakingSignatures()) return;
+/** The opened bytes are still exactly the document (nothing edited or saved since). */
+function unchangedSinceOpen(): boolean {
+  const s = S();
+  return !s.dirty && !s.savedOnce && !!s.originalBytes;
+}
+
+/** Build the file and write it to `handle`, or download it as `name` when there is none or writing fails. */
+async function writeOut(handle: FileSystemFileHandle | null, name: string) {
   await S().run('Saving…', async () => {
     const out = await buildFileForSave();
-    downloadBlob(out, S().fileName || 'document.pdf');
+    if (handle) {
+      try {
+        await writeToHandle(handle, out);
+        useStore.setState({ fileHandle: handle, fileName: handle.name });
+        S().markSaved();
+        S().notify(tf('Saved to {name}', { name: handle.name }));
+        return;
+      } catch (e) {
+        console.warn('Writing to the file failed', e);
+        S().notify('Could not write to the file, so a copy was downloaded instead.', 'error');
+      }
+    }
+    useStore.setState({ fileName: name });
+    downloadBlob(out, name);
     S().markSaved();
   });
 }
 
+/** Save: write back to the opened file where the browser allows it (Chrome, Edge), else download. */
+export async function save() {
+  const s = S();
+  if (!s.bytes || !confirmBreakingSignatures()) return;
+  // Ask for write access first, while the key press or click still counts as a user gesture.
+  const handle = s.fileHandle && (await ensureWritable(s.fileHandle)) ? s.fileHandle : null;
+  await writeOut(handle, S().fileName || 'document.pdf');
+}
+
 /** Save a copy with all comments burnt into the pages (keeps the editing session as is). */
 export async function saveFlattenedCopy() {
   if (!S().bytes) return;
@@ -87,12 +127,22 @@ export async function saveFlattenedCopy() {
   });
 }
 
+/** Save As: a save dialog where available (later saves go to the new file), else ask for a name and download. */
 export async function saveAs() {
   if (!S().bytes) return;
-  const name = prompt(tr('File name'), S().fileName || 'document.pdf');
+  const suggested = S().fileName || 'document.pdf';
+  const handle = await pickSaveHandle(suggested);
+  if (handle === undefined) return;
+  if (handle) {
+    if (!confirmBreakingSignatures()) return;
+    return writeOut(handle, handle.name);
+  }
+  const name = prompt(tr('File name'), suggested);
   if (!name) return;
-  useStore.setState({ fileName: /\.pdf$/i.test(name) ? name : `${name}.pdf` });
-  await save();
+  if (!confirmBreakingSignatures()) return;
+  // A downloaded copy: later saves must not overwrite the file opened before.
+  useStore.setState({ fileHandle: null });
+  await writeOut(null, /\.pdf$/i.test(name) ? name : `${name}.pdf`);
 }
 
 export async function print() {
@@ -387,7 +437,7 @@ export async function signDocument(o: SignOptions) {
   if (willEncrypt) return s.notify('Remove password protection before signing (signing encrypted files is not supported yet).', 'error');
   if (!requirePermission('fillForms') || !confirmBreakingSignatures()) return;
   await s.run('Signing…', async () => {
-    const base = !s.dirty && s.originalBytes ? s.originalBytes : await buildOutput();
+    const base = unchangedSinceOpen() ? s.originalBytes! : await buildOutput();
     const signed = await signPdf(base, o);
     const name = /-signed\.pdf$/i.test(s.fileName) ? s.fileName : `${baseName(s.fileName || 'document')}-signed.pdf`;
     downloadBlob(signed, name);

src/store/store.ts

@@ -33,6 +33,13 @@ export interface SearchHit {
   context: string;
 }
 
+export interface OpenOptions {
+  password?: string;
+  ownerPassword?: string;
+  /** The file it was opened from, when the browser gives one (Save writes back to it). */
+  handle?: FileSystemFileHandle | null;
+}
+
 export type SidebarTab = 'pages' | 'outline' | 'comments' | 'attachments' | 'forms' | 'search' | 'signatures';
 
 export interface ScrollRequest {
@@ -109,6 +116,10 @@ interface State {
   lock: { userPassword: string; needsUserPassword: boolean } | null;
   /** The author's restrictions were lifted for this session without the permissions password. */
   restrictionsLifted: boolean;
+  /** Where the document came from (File System Access API), so Save can write back to it. */
+  fileHandle: FileSystemFileHandle | null;
+  /** Saved at least once: the opened bytes no longer match what the user has on disk. */
+  savedOnce: boolean;
   signatures: SignatureInfo[];
   past: Snapshot[];
   future: Snapshot[];
@@ -149,7 +160,7 @@ export interface TabInfo {
 }
 
 interface Actions {
-  openDocument(bytes: Uint8Array, name: string, opts?: { password?: string; ownerPassword?: string }): Promise<void>;
+  openDocument(bytes: Uint8Array, name: string, opts?: OpenOptions): Promise<void>;
   /** Lift permission restrictions with the owner password; resolves false if it is wrong. */
   unlock(ownerPassword: string): Promise<boolean>;
   /**
@@ -163,7 +174,7 @@ interface Actions {
   /** Close the active tab's document (and the tab, if there are others). */
   closeDocument(): void;
   /** Open a document in a new tab (or in the active tab if it is empty). */
-  openInNewTab(bytes: Uint8Array, name: string, opts?: { password?: string; ownerPassword?: string }): Promise<void>;
+  openInNewTab(bytes: Uint8Array, name: string, opts?: OpenOptions): Promise<void>;
   /** Add an empty tab and activate it; returns its id. */
   newTab(): string;
   switchTab(id: string): void;
@@ -216,6 +227,8 @@ export function anyTabDirty(): boolean {
 
 const initialDoc = {
   restrictionsLifted: false,
+  fileHandle: null as FileSystemFileHandle | null,
+  savedOnce: false,
   fileName: '',
   bytes: null,
   pdf: null,
@@ -303,7 +316,7 @@ export const useStore = create<Store>()((set, get) => {
     set({ currentPage: Math.min(get().currentPage, snap.pageIds.length - 1) });
   }
 
-  async function openDocumentImpl(bytes: Uint8Array, name: string, opts: { password?: string; ownerPassword?: string } = {}) {
+  async function openDocumentImpl(bytes: Uint8Array, name: string, opts: OpenOptions = {}) {
     const original = bytes;
     let loaded;
     try {
@@ -382,6 +395,7 @@ export const useStore = create<Store>()((set, get) => {
       bytes,
       originalBytes: original,
       fileName: name,
+      fileHandle: opts.handle ?? null,
       pdf: loaded.pdf,
       geoms: loaded.geoms,
       pageIds,
@@ -658,7 +672,7 @@ export const useStore = create<Store>()((set, get) => {
       await restore(next);
     },
 
-    markSaved: () => set({ dirty: false }),
+    markSaved: () => set({ dirty: false, savedOnce: true }),
 
     setTool: (tool) =>
       set({