Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Commit

Permalink
Update index.md
Browse files Browse the repository at this point in the history
Document promise option.
Fixes #9806.
  • Loading branch information
tomayac authored Mar 27, 2023
1 parent 38fd5b7 commit 10ec827
Showing 1 changed file with 20 additions and 1 deletion.
21 changes: 20 additions & 1 deletion src/site/content/en/blog/async-clipboard/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ authors:
- thomassteiner
description: Async Clipboard API simplifies permissions-friendly copy and paste.
date: 2020-07-31
updated: 2022-11-04
updated: 2023-03-27
tags:
- blog
- capabilities
Expand Down Expand Up @@ -98,6 +98,7 @@ try {
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
// The key is determined dynamically based on the blob's type.
[blob.type]: blob
})
]);
Expand All @@ -107,6 +108,24 @@ try {
}
```

Alternatively, you can also write a promise to the `ClipboardItem` object.
For this pattern, you need to know the MIME type of the data beforehand.

```js
try {
const imgURL = '/images/generic/file.png';
await navigator.clipboard.write([
new ClipboardItem({
// Set the key beforehand and write a promise as the value.
'image/png': fetch(imgURL).then(response => response.blob()),
})
]);
console.log('Image copied.');
} catch (err) {
console.error(err.name, err.message);
}
```

{% Aside 'warning' %}
Safari (WebKit) treats user activation differently than Chromium (Blink)
(see [WebKit bug #222262](https://bugs.webkit.org/show_bug.cgi?id=222262)).
Expand Down

0 comments on commit 10ec827

Please sign in to comment.