CODEWITHSUNDEEP
javascriptimagesafaricopyclipboard
Felipe Ruiz
Felipe Ruiz

Reputation: 141

Javascript Clipboard API write() does not work in Safari

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.

Upvotes: 14

Views: 11627

Answers (3)

gimp3695
gimp3695

Reputation: 137

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); });
}

Upvotes: 0

TheAlphaGhost
TheAlphaGhost

Reputation: 190

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.");
   });
});

Upvotes: 2

Leah Zorychta
Leah Zorychta

Reputation: 13429

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); });
});

Upvotes: 16

Related Questions