Web/API/Clipboard/read

From Get docs


The read() method of the Clipboard interface requests a copy of the clipboard's contents, delivering the data to the returned Promise when the promise is resolved. Unlike readText(), the read() method can return arbitrary data, such as images. This method can also return text.

To read from the clipboard, you must first have the "clipboard-read" permission.

Note: The asynchronous Clipboard and Permissions APIs are still in the process of being integrated into most browsers, so they often deviate from the official rules for permissions and the like. Be sure to review the compatibility table before using these methods.


Syntax

var promise = navigator.clipboard.read();

Parameters

None.

Return value

A Promise that resolves with a DataTransfer object containing the clipboard's contents. The promise is rejected if permission to access the clipboard is not granted.

Example

After using navigator.permissions.query() to find out if we have (or if the user will be prompted to allow) "clipboard-read" access, this example fetches the data currently on the clipboard. If it's not a png image, an error message is presented. Otherwise, an image element referred to using the variable imgElem has its source replaced with the clipboard's contents.

// First, ask the Permissions API if we have some kind of access to
// the "clipboard-read" feature.

navigator.permissions.query({name: "clipboard-read"}).then(result => {
  // If permission to read the clipboard is granted or if the user will
  // be prompted to allow it, we proceed.

  if (result.state == "granted" || result.state == "prompt") {
    navigator.clipboard.read().then(data => {
      for (let i=0; i<data.items.length; i++) {
        if (data.items[i].type != "image/png") {
          alert("Clipboard contains non-image data. Unable to access it.");
        } else {
          const blob = data.items[i].getType("image/png");
          imgElem.src = URL.createObjectURL(blob);
        }
      }
    });
  }
});

Note: At this time, while Firefox does implement read(), it does not recognize the "clipboard-read" permission, so attempting to use the Permissions API to manage access to the API will not work.


Specifications

Specification Status Comment
Clipboard API and eventsThe definition of 'read()' in that specification. Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
read

Chrome Partial support 76

Notes'

Partial support 76

Notes'

Notes' From version 76, the image/png MIME type is supported. Partial support 66

Notes'

Notes' Images are not supported.

Edge

Full support 79

Firefox Full support 63

Notes' Disabled'

Full support 63

Notes' Disabled'

Notes' Currently works just like readText(); non-text content is not currently supported. Disabled' From version 63: this feature is behind the dom.events.asyncClipboard.dataTransfer preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

Full support 63

Safari

Full support 13.1

WebView Android Partial support 84

Notes'

Partial support 84

Notes'

Notes' From version 84, the image/png MIME type is supported. Partial support 66

Notes'

Notes' Images are not supported.

Chrome Android Partial support 84

Notes'

Partial support 84

Notes'

Notes' From version 84, the image/png MIME type is supported. Partial support 66

Notes'

Notes' Images are not supported.

Firefox Android Full support 63

Notes' Disabled'

Full support 63

Notes' Disabled'

Notes' Currently works just like readText(); non-text content is not currently supported. Disabled' From version 63: this feature is behind the dom.events.asyncClipboard.dataTransfer preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Opera Android

Full support 54

Safari iOS

Full support 13.4

Samsung Internet Android

Full support 12.0

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
See implementation notes.'
See implementation notes.
User must explicitly enable this feature.'
User must explicitly enable this feature.


See also