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

[Async clipboard article] Document the option to write a promise to the clipboard #9816

Merged
merged 2 commits into from
Mar 27, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 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