File System Access API – Access to User's File System

File System Access API allows web applications to read and write files to the user's device file system with user permission. This opens new possibilities, giving web applications the same power as desktop applications.

The API works only in secure environments (HTTPS or localhost) and requires active user involvement through file or directory selection.

Example: How to Open and Read a File

const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
console.log(contents);

In this example: the user selects a file, and we read its contents as text.

Example: How to Write to a File

const handle = await window.showSaveFilePicker({
  suggestedName: 'example.txt',
});
const writable = await handle.createWritable();
await writable.write('Hello world');
await writable.close();

In this example: we create a new file or overwrite an existing one by writing text to it.

Advantages:

Allows real file operations (read/write) like desktop applications
Better user experience without server transfers
Useful for text editors, drawing apps, or backup tools

Disadvantages and Limitations:

Works only in Chromium-based browsers (Chrome, Edge, etc.)
Always requires user interaction to select/confirm files
Some features are still experimental and may change

Conclusion