Clipboard.read()
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 sequence of ClipboardItem
objects
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.length; i++) {
if (!data[i].types.includes("image/png")) {
alert("Clipboard contains non-image data. Unable to access it.");
} else {
data[i].getType("image/png").then((blob) => {
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 |
---|
Clipboard API and events # dom-clipboard-read |
Browser compatibility
BCD tables only load in the browser