FileSystemFileHandle

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.

Inherits properties from its parent, FileSystemHandle.

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.

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();
}

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();
}

• File System Access API
• The File System Access API: simplifying access to local files