FileSystemHandle
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
* Some parts of this feature may have varying levels of support.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
Note: This feature is available inWeb Workers.
TheFileSystemHandle interface of theFile System API is an object which represents a file or directory entry. Multiple handles can represent the same entry. For the most part you do not work withFileSystemHandle directly but rather its child interfacesFileSystemFileHandle andFileSystemDirectoryHandle.
Interfaces based on FileSystemHandle
Below is a list of interfaces based on theFileSystemHandle interface.
FileSystemFileHandleRepresents a handle to a file entry.
FileSystemDirectoryHandleProvides a handle to a directory entry.
Instance properties
Instance methods
isSameEntry()Compares two handles to see if the associated entries (either a file or directory) match.
queryPermission()ExperimentalQueries the current permission state of the current handle.
remove()ExperimentalNon-standardRequests removal of the entry represented by the handle from the underlying file system.
requestPermission()ExperimentalRequests read or readwrite permissions for the file handle.
Examples
Checking Type
The below code allows the user to choose a file from the file picker and then tests to see whether the handle returned is a file or directory
// store a reference to our file handlelet fileHandle;async function getFile() { // open file picker [fileHandle] = await window.showOpenFilePicker(); if (fileHandle.kind === "file") { // run file code } else if (fileHandle.kind === "directory") { // run directory code }}Query/Request Permissions
The following asynchronous function returns true if user has granted read or readwrite permissions to the file handle. Permission is requested if not.
// fileHandle is a FileSystemFileHandle// withWrite is a boolean set to true if writeasync function verifyPermission(fileHandle, withWrite) { const opts = {}; if (withWrite) { opts.mode = "readwrite"; } // Check if we already have permission, if so, return true. if ((await fileHandle.queryPermission(opts)) === "granted") { return true; } // Request permission to the file, if the user grants permission, return true. if ((await fileHandle.requestPermission(opts)) === "granted") { return true; } // The user did not grant permission, return false. return false;}Comparing Entries
The following function compares a single entry with an array of entries, and returns a new array with any matching entries removed.
function removeMatches(fileEntry, entriesArr) { const newArr = entriesArr.filter((entry) => !fileEntry.isSameEntry(entry)); return newArr;}Specifications
| Specification |
|---|
| File System # api-filesystemhandle |
Browser compatibility
Loading…