Javascript Clipboard API write() does not work in Safari

Question

I'm using javascript Clipboard API to copy an image to the clipboard. It works in Chrome and Edge but not in Safari in spite of official documentation of Safari says that it's supported.

Check the documentation: https://webkit.org/blog/10855/

In this example (not my real code), write() throws an error:

document.getElementById("copy").addEventListener("click", async function() {
    const response = await fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
    const blob = await response.blob();

    navigator.clipboard.write([new ClipboardItem({ "image/png": blob })])
      .then(function () { console.log('copied'); })
      .catch(function (error) { console.log(error); });
});

The given error is:

NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Terni

Answer 1

It's because of your await call before calling clipboard.write. Apple doesn't allow this. You have to pass your promise directly into ClipboardItem like this:

document.getElementById("copy").addEventListener("click", async function() {
    const makeImagePromise = async () => {
        const response = await fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
        return await response.blob();
    }

    navigator.clipboard.write([new ClipboardItem({ "image/png": makeImagePromise() })])
      .then(function () { console.log('copied'); })
      .catch(function (error) { console.log(error); });
});

Immeasurable

This answer solved the same NotAllowedError issue I had. It seems that in most of the examples out there the await is placed before the navigator.clipboard.write, which fails in Safari. Thanks. – Anticline

This is a great discovery! For text content, setTimeout(async () => await navigator.clipboard.writeText('hello')) is simpler. – Spy

Answer 2

Use clipboard.write function. Apple has implement this for few Weeks in Safari and iOS.

setTimeout(async () => {
   await navigator.clipboard.writeText("Your text").then(function () {
      console.log("Copy to clipboard successfully.");
   }, function () {
      console.log("Copy to clipboard unsuccessfully.");
   });
});

Eugenieeugenio

@user2342558. What exactly is not working ? Safari 16.5 working here. Do you run in the error function, or nothing happens ? – Eugenieeugenio

sorry, I don't remember if there was an error, it's been a while – Polygynist

Answer 3

I just wanted to say thank you to David Zorchtya

Here is an example of just doing plain text.

async function fetchData(){
    let res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    let data = await res.json();
    jsonplaceholder = JSON.stringify(data);
    return new Blob([jsonplaceholder], { type: 'text/plain' });
}

async function copyToClipboard() {

    const clipboardItem = new ClipboardItem({ 'text/plain': fetchData() });

    navigator.clipboard.write([clipboardItem])
    .then(function () { alert('copied'); })
    .catch(function (error) { alert(error); });
}

Efflorescence