'JS or Angular Copy Text with Image

I need to copy both text and image in single click. I tried below code. I clicked and pasted only I'm getting "clip_message"

My HTML:

<button id="copy" onclick="writeClipImg()"><strong>Copy</strong></button>

My JS code

async function writeClipImg() {
  try {
    const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();
    const blob2 = new Blob(['clip_message'], {type: 'text/plain'});
    await navigator.clipboard.writeText('swe');
    await navigator.clipboard.write([
      new ClipboardItem({
            'text/plain': blob2,
        'image/png': blob
      })
    ]);
    
    console.log('Fetched image copied.');
  } catch(err) {
    console.error(err.name, err.message);
  }
}

Actually I tried in JS. If I have solution in Angular, thats also better. Please help me to copy both in single click. Thanks

Solution 1:^[1]

You can work around the one ClipboardItem item limitation by using HTML instead.

I haven't tried this in other browsers, but at least in Chrome it works, and I can paste in Word/Teams/Slack without problems.

Note: the snippet below does not work on StackOverflow because of some security restrictions, but you can try it on codepen

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  const html = `
      <img src="https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png">
      <p>Lorem ipsum</p>
  `;
  const data = [
    new ClipboardItem({
      "text/html": new Blob([html], {
        type: "text/html"
      })
    })
  ];

  navigator.clipboard.write(data).then(
    () => {
      console.log("Copied to clipboard!");
    },
    (err) => {
      console.error(err);
    }
  );
});

<button id="btn">Copy</button>

Solution 2:^[2]

Probably, we cant copy both the image and the text in this period of time.

According to the Clipboard.write() documentation:

Note: You can only pass in one clipboard item at a time.

I have tried to pass an array to the cliboard.write method, but it throws the following error:

(index):29 NotAllowedError Support for multiple ClipboardItems is not implemented.

BTW, you can check this example, as well.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="copy()">Copy Button</button>
  <script>
    async function copy(){
      try {
    const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();
    const blob2 = new Blob(['clip_message'], {type: 'text/plain'});
    // await navigator.clipboard.writeText('swe');
    await navigator.clipboard.write([
      new ClipboardItem({
           [blob.type]: blob
      }),
        new ClipboardItem({
            'text/plain': blob2
      })
    ]);
    
    console.log('Fetched image copied.');
  } catch(err) {
    console.error(err.name, err.message);
  }
    }
  </script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dan Manastireanu
Solution 2	Roman A.

'JS or Angular Copy Text with Image

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]