ClipboardItem()

The ClipboardItem() constructor of the Clipboard API creates a new ClipboardItem object which represents data to be stored or retrieved via the Clipboard API, that is clipboard.write() and clipboard.read() respectively.

Syntax

var ClipboardItem = new ClipboardItem(ClipboardItemData);

Parameters

ClipboardItemData

An Object with the MIME type as the key and data as the value. The data can represented as a Blob, a String or a Promise which resolves to either a blob or string.

ClipboardItemOptions Optional

An Object with the following properties:

• presentationStyle: One of "unspecified", "inline" or "attachment". The default is "unspecified".

Examples

The below example requests a png image using the Fetch API, and in turn, the responses' blob() method, to create a new ClipboardItem. This item is then written to the clipboard, using the Clipboard.write() method.

async function writeClipImg() {
  try {
    const imgURL = '/myimage.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.');
  } catch(err) {
    console.error(err.name, err.message);
  }
}

Specifications

Browser compatibility

See also

• Clipboard API
• Async Clipboard API demo on Glitch
• Image support for Async Clipboard article