Multiple Clipboard Items

by Sayantan Das

HTML

<!DOCTYPE html>
<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>Clipboard</title>
    <!-- <script type="text/javascript" src="./index.js" async defer></script> -->
</head>

<body>
    <main>
        <div id="input">
            <input type="text" name="textClipboard" id="textClipboard" value="text 1" />
            <input type="text" name="imageClipboard" id="imageClipboard"
                value="https://d2ggyth3weptg8.cloudfront.net/bchurunway/cat.png" />
            <input type="button" value="copy" id="copy" />
        </div>

        <div id="output">
            <input type="button" value="paste" id="paste" />
            <div id="pasteHere" />
            <img src="" alt="" id="sample-img" />
        </div>
    </main>
</body>

</html>

JavaScript

document.querySelector('#copy').addEventListener('click', async event => {
    if (!navigator.clipboard) {
        // Clipboard API not available
        return
    }
    const text = document.querySelector('#textClipboard').value;
    const imageUrl = document.querySelector('#imageClipboard').value;
    try {
        // copy text
        await navigator.clipboard.writeText(text)
        console.log('Text Copied to clipboard');

        // copy image
        await copyImage(imageUrl);
        console.log('Image Copied to clipboard');
    } catch (err) {
        console.error('Failed to copy!', err)
    }
});

async function copyImage(url) {
    console.log("Wriing to clipbard");

    const response = await fetch(url);
    const blob = await response.blob();

    const item = new ClipboardItem({ 'image/png': blob });
    await navigator.clipboard.write([item]).then(function () {
        console.log("Copied to clipboard successfully!");
    }, function (error) {
        console.error("unable to write to clipboard. Error:");
        console.log(error);
    });
};

document.querySelector('#paste').addEventListener('click', async event => {
    if (!navigator.clipboard) {
        // Clipboard API not available
        return
    }
    try {
        // text 
        const text = await navigator.clipboard.readText();
        document.querySelector('#pasteHere').innerHTML = text;

        // image
        const img = document.querySelector("#sample-img");
        navigator.clipboard.read().then((data) => {
            for (let i = 0; i < data.length; i++) {
                if (!data[i].types.includes("image/png")) {
                    // Clipboard does not contain image data
                } else {
                    data[i].getType("image/png").then((blob) => {
                        img.src = URL.createObjectURL(blob);
                    });
                }
            }
        });
    } catch (err) {
        console.error('Failed to copy!', err)
    }
});