fix: reject pickJsonFile promise when user cancels file picker

src/__tests__/io.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { pickJsonFile } from '../io'
+
+describe('pickJsonFile', () => {
+  const originalCreateElement = document.createElement.bind(document)
+  let createdInput: HTMLInputElement
+
+  beforeEach(() => {
+    vi.spyOn(document, 'createElement').mockImplementation((tag: string) => {
+      const el = originalCreateElement(tag)
+      if (tag === 'input') {
+        createdInput = el as HTMLInputElement
+        vi.spyOn(createdInput, 'click').mockImplementation(() => {})
+      }
+      return el
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('resolves with file contents when a file is selected', async () => {
+    const promise = pickJsonFile()
+
+    const file = new File(['{"hello":"world"}'], 'test.json', {
+      type: 'application/json',
+    })
+    Object.defineProperty(createdInput, 'files', {
+      value: [file],
+      configurable: true,
+    })
+    createdInput.dispatchEvent(new Event('change'))
+
+    await expect(promise).resolves.toBe('{"hello":"world"}')
+  })
+
+  it('resolves with null when the user cancels the file picker', async () => {
+    const promise = pickJsonFile()
+
+    createdInput.dispatchEvent(new Event('cancel'))
+
+    await expect(promise).resolves.toBeNull()
+  })
+})

src/hooks/useShareImport.ts

@@ -133,6 +133,7 @@ export function useShareImport({ getFramework, navigate, addRaw, replace, addImp
     (onImported: (fw: Framework) => void) => {
       pickJsonFile()
         .then((text) => {
+          if (text === null) return
           const fw = JSON.parse(text)
           if (fw.name && fw.quadrants && fw.quadrants.length === 4) {
             const imported: Framework = {

src/io.ts

@@ -8,7 +8,7 @@ export function downloadJson(filename: string, data: string): void {
   URL.revokeObjectURL(url)
 }
 
-export function pickJsonFile(): Promise<string> {
+export function pickJsonFile(): Promise<string | null> {
   return new Promise((resolve, reject) => {
     const input = document.createElement('input')
     input.type = 'file'
@@ -24,6 +24,7 @@ export function pickJsonFile(): Promise<string> {
       reader.onerror = () => reject(new Error('Failed to read file'))
       reader.readAsText(file)
     }
+    input.oncancel = () => resolve(null)
     input.click()
   })
 }