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 thought 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 file object representing the state on disk of the entry represented by the handle.

createWritable()

Creates a FileSystemWritableFileStream 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.

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

async function getTheFile() {
  // open file picker
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // get file contents
  const fileData = await fileHandle.getFile();
}

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
FileSystemFileHandle
86
86
No
No
72
No
No
86
No
No
No
14.0
createWritable
86
86
No
No
72
No
No
86
No
No
No
14.0
getFile
86
86
No
No
72
No
No
86
No
No
No
14.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle