fix file open

demo/chains-of-thought/main.ts

@@ -62,10 +62,10 @@ const saveAsButton = document.querySelector('button[name="save-as"]')!;
 const main = document.querySelector('main')!;
 const fileSaver = new FileSaver('chains-of-thought', 'json', 'application/json');
 
-async function openFile() {
+async function openFile(showPicker = true) {
   try {
-    const text = await fileSaver.open();
-    const json = JSON.parse(text);
+    const text = await fileSaver.open(showPicker);
+    const json = JSON.parse(text || '{ "thoughts": [], "connections": [] }');
     main.innerHTML = renderChainOfThought(json);
   } catch (e) {
     // No file handler was persisted or the file is invalid JSON.
@@ -89,4 +89,4 @@ saveAsButton.addEventListener('click', () => {
   saveFile(true);
 });
 
-openFile();
+openFile(false);

src/persistence/file.ts

@@ -44,13 +44,15 @@ export class FileSaver {
     return undefined;
   }
 
-  async open(): Promise<string> {
+  async open(showPicker = true): Promise<string> {
     let fileHandler = await this.#fileHandlerPromise;
 
-    if (fileHandler === undefined) {
-      fileHandler = await this.#showFilePicker();
+    if (showPicker) {
+      fileHandler = await this.#showOpenFilePicker();
     }
 
+    if (fileHandler === undefined) return '';
+
     const file = await fileHandler.getFile();
     const text = await file.text();
     return text;
@@ -65,7 +67,7 @@ export class FileSaver {
     let fileHandler = await this.#fileHandlerPromise;
 
     if (promptNewFile || fileHandler === undefined) {
-      fileHandler = await this.#showFilePicker();
+      fileHandler = await this.#showSaveFilePicker();
     }
 
     const writer = await fileHandler.createWritable();
@@ -73,7 +75,11 @@ export class FileSaver {
     await writer.close();
   }
 
-  async #showFilePicker() {
+  clear() {
+    this.#store.clear();
+  }
+
+  async #showSaveFilePicker() {
     this.#fileHandlerPromise = window.showSaveFilePicker({
       id: this.#id,
       suggestedName: `${this.#id}.${this.#fileType}`,
@@ -89,6 +95,25 @@ export class FileSaver {
     await this.#store.set('file', fileHandler);
     return fileHandler;
   }
+
+  async #showOpenFilePicker() {
+    this.#fileHandlerPromise = window
+      .showOpenFilePicker({
+        id: this.#id,
+        suggestedName: `${this.#id}.${this.#fileType}`,
+        types: [
+          {
+            description: `${this.#fileType.toUpperCase()} document`,
+            accept: { [this.#mimeType]: [this.#fileExtension] },
+          },
+        ],
+      })
+      .then((files) => files[0]);
+
+    const fileHandler = (await this.#fileHandlerPromise)!;
+    await this.#store.set('file', fileHandler);
+    return fileHandler;
+  }
 }
 
 declare global {