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 ?

Documentation / Reference


Powered by ComboStrap