Javascript - Browser - File System Access
About
The File System Access is a file system api that permits to open, modify and save the same file.
While the fileAPI permits just to load and download file without overwriting the source.
<button>Choose a text file</button>
document.querySelector("button").addEventListener("click", async () => {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const [handle] = await parent.window.showOpenFilePicker(options);
let file = await handle.getFile();
if (file.type == 'text/plain') {
let text = await file.text();
console.log(text);
}
});
showOpenFilePicker Supported ?
if ('showOpenFilePicker' in window) {
console.log("Save As button in addition to a Save button");
}
Support
Must be handling a user gesture to show a file picker
about:srcdoc:5 Uncaught (in promise) DOMException: Failed to execute 'showOpenFilePicker' on 'Window': Must be handling a user gesture to show a file picker.
at HTMLButtonElement.<anonymous> (about:srcdoc:5:42)
You are missing an await somewhere ?