文件系统访问 API 文件写入给出错误

Question

When i run the following program:

JS:

async function write(){
  const filehandle = window.showOpenFilePicker();
  const writable = await filehandle.createWritable();
  await writable.write('The file has been updated');
  await writable.close();
}

HTML:

<button onclick = "write();">
write file
</button>

I get the following error:

[Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write

I clicked the link and it was no help, and i got the same error when using document.append, even though document.write was not used.

I'm still a newbie to the File System Access API, and need help. Thank you all!

Edit: i have found out that naming a function 'write' is enough to trigger the document.write detection, but even after renaming the function, i now get the error:

Uncaught (in promise) TypeError: filehandle.createWritable is not a function

Answer 1

The window.showOpenFilePicker() method returns a promise with an array of file handles according to the docs :

This means you should fulfill the promise (using await or chaining it with a then :

async function write(){
  const filehandle = await window.showOpenFilePicker();
  // rest of code...
}

Other than that, showOpenFilePicker returns an array containing the file handles. It needs to be retrieved from the array before you can create a writable. You can use array destructuring to do exactly that:

async function write(){
  const [filehandle] = await window.showOpenFilePicker();
  const writable = await filehandle.createWritable();
  await writable.write('The file has been updated');
  await writable.close();
}

And that should do the trick.