FileSystemObserver

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

TheFileSystemObserver interface of theFile System API provides a mechanism to observe changes to the user-observable file system and theOrigin Private File System (OPFS). This means web applications don't have to poll the file system to find changes in the files or folder structure, which can be time-consuming and wasteful.

Constructor

FileSystemObserver()Experimental Non-standard: Creates a newFileSystemObserver object instance.

Instance methods

disconnect()Experimental Non-standard: Stop observing the filesystem.
observe()Experimental Non-standard: Start observing changes to a given file or directory.

Examples

Note:For a complete working example, check outFile System Observer Demo (source code).

Initialize a`FileSystemObserver`

Before you can start observing file or directory changes, you need to initialize aFileSystemObserver to handle the observations. This is done using theFileSystemObserver() constructor, which takes a callback function as an argument:

const observer = new FileSystemObserver(callback);

Thecallback function body can be specified to return and process file change observations in any way you want:

const callback = (records, observer) => {  for (const record of records) {    console.log("Change detected:", record);    const reportContent = `Change observed to ${record.changedHandle.kind} ${record.changedHandle.name}. Type: ${record.type}.`;    sendReport(reportContent); // Some kind of user-defined reporting function  }  observer.disconnect();};

Observe a file or directory

Once aFileSystemObserver instance is available, you can start observing changes to a file system entry by calling theFileSystemObserver.observe() method.

You can observe a file or directory in the user-observable file system or theOrigin Private File System (OPFS) by passing aFileSystemFileHandle orFileSystemDirectoryHandle toobserve(). Instances of these objects can be returned, for example, when asking the user to select a file or directory usingWindow.showSaveFilePicker() orWindow.showDirectoryPicker():

// Observe a fileasync function observeFile() {  const fileHandle = await window.showSaveFilePicker();  await observer.observe(fileHandle);}// Observe a directoryasync function observeDirectory() {  const directoryHandle = await window.showDirectoryPicker();  await observer.observe(directoryHandle);}

You can also observe changes to the OPFS by passing aFileSystemSyncAccessHandle toobserve():

// Observe an OPFS file system entryasync function observeOPFSFile() {  const root = await navigator.storage.getDirectory();  const draftHandle = await root.getFileHandle("draft.txt", { create: true });  const syncHandle = await draftHandle.createSyncAccessHandle();  await observer.observe(syncHandle);}