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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
read
|
Chrome Partial support 76 Partial support 76 Notes' From version 76, the Notes' Images are not supported. |
Edge
Full support 79 |
Firefox Full support 63 Full support 63 Notes' Currently works just like |
IE
No support No |
Opera
Full support 63 |
Safari
Full support 13.1 |
WebView Android Partial support 84 Partial support 84 Notes' From version 84, the Notes' Images are not supported. |
Chrome Android Partial support 84 Partial support 84 Notes' From version 84, the Notes' Images are not supported. |
Firefox Android Full support 63 Full support 63 Notes' Currently works just like |
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
Clipboard.read() by Mozilla Contributors is licensed under CC-BY-SA 2.5.