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
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.