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");
} 

Documentation / Reference

• https://web.dev/file-system-access/
• https://web.dev/browser-fs-access/