FileSystemFileHandle

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The FileSystemFileHandle interface of the File System Access API represents a handle to a file system entry. The interface is accessed through the window.showOpenFilePicker() method.

Note that read and write operations depend on file-access permissions that do not persist after a page refresh if no other tabs for that origin remain open. The queryPermission method of the FileSystemHandle interface can be used to verify permission state before accessing a file.

Properties

Inherits properties from its parent, FileSystemHandle.

Methods

Inherits methods from its parent, FileSystemHandle.

getFile(): Returns a Promise which resolves to a File object representing the state on disk of the entry represented by the handle.
createWritable(): Returns a Promise which resolves to a newly created FileSystemWritableFileStream object that can be used to write to a file.

Examples

Reading a File

The following asynchronous function presents a file picker and once a file is chosen, uses the getFile() method to retrieve the contents.

async function getTheFile() {
  const pickerOpts = {
    types: [
      {
        description: 'Images',
        accept: {
          'image/*': ['.png', '.gif', '.jpeg', '.jpg'],
        },
      },
    ],
    excludeAcceptAllOption: true,
    multiple: false,
  };

  // open file picker
  const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
  // get file contents
  const fileData = await fileHandle.getFile();
  return fileData;
}

Writing a File

The following asynchronous function writes the given contents to the file handle, and thus to disk.

async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();

  // Write the contents of the file to the stream.
  await writable.write(contents);

  // Close the file and write the contents to disk.
  await writable.close();
}

Specifications

Specification
File System Standard # api-filesystemfilehandle

Browser compatibility

BCD tables only load in the browser