FileSystemSyncAccessHandle: write() method

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

The write() method of the FileSystemSyncAccessHandle interface writes the content of a specified buffer to the file associated with the handle, optionally at a given offset. Note that you cannot directly manipulate the contents of an ArrayBuffer. Instead, you create one of the typed array objects like an Int8Array or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.

Writes performed using FileSystemSyncAccessHandle.write() are in-place, meaning that changes are written to the actual underlying file at the same time as they are written to the writer. This is not the case with other writing mechanisms available in the File System Access API (e.g. FileSystemFileHandle.createWritable()), where changes are not committed to disk until the writing stream is closed.

Syntax

js

write(buffer, FileSystemReadWriteOptions)

Parameters

buffer

An ArrayBuffer or ArrayBufferView (such as a DataView) representing the buffer to be written to the file.

FileSystemReadWriteOptions Optional

An options object containing the following properties:

at

A number representing the offset in bytes from the start of the file that the buffer should be written at.

Return value

A Promise which resolves to a number representing the number of bytes written to the file.

Exceptions

InvalidStateError DOMException

Thrown if the associated access handle is already closed.

Examples

The following asynchronous event handler function is contained inside a Web Worker. On receiving a message from the main thread it:

  • Creates a synchronous file access handle.
  • Gets the size of the file and creates an ArrayBuffer to contain it.
  • Reads the file contents into the buffer.
  • Encodes the message and writes it to the end of the file.
  • Persists the changes to disk and closes the access handle.

js

onmessage = async (e) => {
  // Retrieve message sent to work from main script
  const message = e.data;

  // Get handle to draft file
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // Get sync access handle
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // Get size of the file.
  const fileSize = accessHandle.getSize();
  // Read file content to a buffer.
  const buffer = new DataView(new ArrayBuffer(fileSize));
  const readBuffer = accessHandle.read(buffer, { at: 0 });

  // Write the message to the end of the file.
  const encoder = new TextEncoder();
  const encodedMessage = encoder.encode(message);
  const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer });

  // Persist changes to disk.
  accessHandle.flush();

  // Always close FileSystemSyncAccessHandle if done.
  accessHandle.close();
};

Note: In earlier versions of the spec, close(), flush(), getSize(), and truncate() were wrongly specified as asynchronous methods. This has now been amended, but some browsers still support the asynchronous versions.

Specifications

Specification
File System Standard
# api-filesystemsyncaccesshandle-write

Browser compatibility

BCD tables only load in the browser

See also