File system access prior art, current implementations and disambiguation: The difference between WICG File System Access and WHATWG File System

file-system-access.md

Some context:

In browsers, is it possible to have the user select a directory and then for your app to select specific files within it?

Yes. That can be achieved using File API or File System Access API.

Using File API you can read this How to upload and list directories at firefox and chrome/chromium using change and drop events.

Using File System Access API you can do something like

const dir = await showOpenDirectoryPicker();
const js = await dir.getFileHandle('background.js');
const manifest = await dir.getFileHandle('manifest.json');
// Read files
// Stream file
(await js.getFile()).stream().pipeTo(...);
// Parse JSON file to JavaScript object
let json = JSON.parse(await (await manifest.getFile()).text());

File system API can only access isolated and sandboxed file systems which are initially empty. It won't have access to existing files/folders in local file systems.

If you search for "File System Access" and have not been writing Web applications that read and write to the users' local file system, you might get confused about where the files you are you are accessing, reading, and writing are being read from and written to; a storage mechanism associated with the origin of the Web site or application you are accessing the given browser storage API; or the actual file system on the users' machine?

It's a long story...

WICG File System Access API provides functionality to asynchronously create, open, read, write, move, delete, stream local files and directories on the users' filesystem;

(formerly known as Native File System API and prior to that it was called Writeable Files API)

see The File System Access API: simplifying access to local files.

WHATWG File System API provides functionality to asynchronously and synchronously create, open, read, write, move, delete, stream local files and directories in origin storage accessed using navigator.storage.getDirectory().

W3C FileSystem API

defines functionality on a local sandboxed file system within the same origin of the Web Application that created it. It exposes standard file system operations to Web Applications, such as creation of files and directories, and reading and writing of them (from and to disk), including other programmatic manipulation of files and directories.

has not been updated since 2016.

File API: Writer Last updated 2014.

File API: Directories and System Last updated 2014.

WICG File System Access API is a Draft. Is implemented in Chromium-based browsers (including Chrome). Is not implemented in Firefox.

WHATWG File System (Standard) is implemented in Chromium-based browsers, and Firefox, and Webkit-based browsers.

The different API's share some of the same classes, e.g., FileSystemFileHandle, FileSystemDirectoryHandle, FileSystemWritableFileStream, FileSystemObserver.

Much of the API that appears in WHATWG File System (Standard) was once included in WICG File System Access API.

The discrete API's operate in different contexts.

We can use showOpenFilePicker(), showSaveFilePicker(), showDirectoryPicker() to open files and folders on the underlying file system the browser is running in, or from. We can then write, read, create, move, delete, and observe file changes using WICG File System Access API.

When we call navigator.storage.getDirectory() we are creating a directory on the origin the call is made on. We can then use FileSystemSyncAccessHandle.

webkitRequestFileSystem is still defined on Chrome, see Exploring the FileSystem APIs, How to write into a file (in user directory) using JavaScript?, How to use webkitRequestFileSystem at file: protocol, Remove Persistent Quota.

I'll note here that W3C File API and WHATWG HTML provide means to upload files and directories from the users' local file system, and write files to the users' local file system using <input type="file"> 4.10.5.1.17 File Upload state (type=file) and <a>4.6.2 Links created by a and area elements with download attribute, among other ways to download a file, see, e.g., How to upload and list directories at firefox and chrome/chromium using change and drop events (kindly enough updated by StackOverflow user nh2), How to download a file without using <a> element with download attribute or a server?.

Mozilla's position on WICG File System Access API, File System Access API #154.

We can get, read, write, create files on the users' machine using WHATWG HTML and W3C File API, e.g., see above at <input type="file">, <a download>, <form method="get">; text-editor ; native-file-system-adapter.