The File System Access API file writing gives error

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

nbokmans · Accepted Answer · 2022-08-11 19:59:39Z

0

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.

answered Aug 11, 2022 at 19:59

nbokmans

5,7965 gold badges41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

The File System Access API file writing gives error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related