Javascript - Browser - File System Access


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();

showOpenFilePicker Supported ?

if ('showOpenFilePicker' in window) {
  console.log("Save As button in addition to a Save button");


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

Discover More
Browser / Javascript - File System ( API )

API File System in the browser via the Web Api See: File download test - Selenium ...

Share this page:
Follow us:
Task Runner