ClipboardItem: ClipboardItem() constructor

Syntax

new ClipboardItem(data)
new ClipboardItem(data, options)

Parameters

data

An Object with the MIME type as the key and data as the value. The data can be represented as one of the following:

• a Blob
• a string
• a Promise that resolves to either a Blob or string.

options Optional

An object with the following properties:

presentationStyle Optional

One of the three strings: unspecified, inline or attachment. The default is unspecified.

inline signifies to apps that receive the paste that the ClipboardItem should be inserted inline at the point of paste. attachment signifies to apps that receive the paste that the ClipboardItem should be added as an attachment. unspecified doesn't signify any information to apps that receive the paste.

Examples

The below example requests a PNG image using fetch(), and in turn, the Response.blob() method, to create a new ClipboardItem. This item is then written to the clipboard, using the Clipboard.write() method.

async function writeClipImg() {
  try {
    if (ClipboardItem.supports("image/png")) {
      const imgURL = "/my-image.png";
      const data = await fetch(imgURL);
      const blob = await data.blob();
      await navigator.clipboard.write([
        new ClipboardItem({
          [blob.type]: blob,
        }),
      ]);
      console.log("Fetched image copied.");
    } else {
      console.log("image png is not supported");
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Specifications

Browser compatibility

See also

• Clipboard API
• Image support for Async Clipboard article