DOMException: The request is not allowed by the user agent or the platform in the current context.

[lin onetwo]

const [fileHandle] = await showOpenFilePicker({
        _preferPolyfill: false,
        multiple: false,
        excludeAcceptAllOption: true,
        // @ts-expect-error https://github.com/jimmywarting/native-file-system-adapter/issues/57
        types: [
          {
            description: 'JSON file',
            accept: {
              'application/json': ['.json'],
            },
          },
        ],
      });
      const blob = new Blob();
      const reader = await fileHandle.createWritable();

Throw here

export class FileHandle {
  constructor (name = '', file = new File([], name), writable = true) {
    this._file = file
    this.name = name
    this.kind = 'file'
    this._deleted = false
    this.writable = writable
    this.readable = true
  }

  async getFile () {
    if (this._deleted) throw new DOMException(...GONE)
    return this._file
  }

  async createWritable (opts) {
    if (!this.writable) throw new DOMException(...DISALLOWED)
// ↑

[lin onetwo]

This says it is granted in (await fileHandle.queryPermission(options))

async function verifyPermission(fileHandle: FileSystemFileHandle, readWrite?: boolean) {
  const options: {
    mode?: string | undefined;
  } = {};
  if (readWrite) {
    options.mode = 'readwrite';
  }
  // Check if permission was already granted. If so, return true.
  if ((await fileHandle.queryPermission(options)) === 'granted') {
    return true;
  }
  // Request permission. If the user grants permission, return true.
  if ((await fileHandle.requestPermission(options)) === 'granted') {
    return true;
  }
  // The user didn't grant permission, so return false.
  return false;
}

but still has this error

[lin onetwo]

Solution:

const [fileHandle] = await showOpenFilePicker({
        _preferPolyfill: false,
        multiple: false,
        excludeAcceptAllOption: true,
        // @ts-expect-error https://github.com/jimmywarting/native-file-system-adapter/issues/57
        types: [
          {
            description: 'JSON file',
            accept: {
              'application/json': ['.json'],
            },
          },
        ],
      });
      if (!await verifyPermission(fileHandle)) {
        throw new Error(`Permission denied when importing graph`);
      }
      const file = await fileHandle.getFile();
      const dataInputText = await file.text();
      const dataInput: unknown = JSON.parse(dataInputText);