Pasting images from clipboard

Wappler General Need Help
14

Here is an ugly but working example using the codepen code example:

Server connect is using the base64tofile extension (https://community.wappler.io/t/base64tofile-custom-module-nodejs/45949):

image
image1563×514 16.8 KB

Then on the client side:
image

Where text2 is a hidden input with: {{pasted_image}} value like:
dmx-bind:value="pasted_image" type="hidden"
(pasted_image will be set on our javascript code)

This is the content page:

<div class="container">
    <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/wapplercommunity/imagefromclipboard">
        <input id="text1" autocomplete="off" name="name" type="text" class="form-control">
        <input id="text2" name="image" class="form-control" dmx-bind:value="pasted_image" type="hidden">
        <div class="containerimage">
            <div class="message">
                <div class="shortcut">
                    <span class="shortcut__key">Ctrl</span>
                    <span class="shortcut__sign">+</span>
                    <span class="shortcut__key">V</span>
                </div>
                <div class="message__text">
                    to paste image from clipboard
                </div>
            </div>
            <img class="image" />
        </div>
        <button id="btn1" class="btn" type="submit">Submit</button>

    </form>
</div>
<style>
    @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap");

    :root {
        --color-light: #fff;
        --color-dark: #222;
        --color-border: rgba(255, 255, 255, 0.8);
    }

    * {
        margin: 0;
        padding: 0;
        border: none;
        box-sizing: border-box;
    }

    /* body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-dark);
    } */

    .containerimage {
        width: 600px;
        height: 300px;
        max-width: 100%;
        max-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border: 6px dashed var(--color-border);
        border-radius: 10px;
        overflow: hidden;
    }

    .message {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: "Roboto Mono", monospace;
        font-size: 20px;
        color: var(--color-light);
    }

    .message__text {
        margin-top: 12px;
        text-align: center;
    }

    .shortcut {
        display: flex;
        align-items: center;
    }

    .shortcut__key {
        padding: 6px 12px;
        border: 2px solid var(--color-light);
        border-radius: 6px;
    }

    .shortcut__sign {
        margin: 0 6px;
    }

    .image {
        max-width: 100%;
        max-height: 100%;
    }

    .hidden {
        display: none;
    }
</style>




<script>
    const imageElement = document.querySelector(".image");
const messageElement = document.querySelector(".message");

function setImage(src) {
	imageElement.src = src;
}


function hideMessage() {
	messageElement.classList.add("hidden");
}

function loadBlobImageSrc(blob) {
	return new Promise((resolve) => {
		const reader = new FileReader();
		reader.onload = (data) => {
			resolve(data.target.result);
		};
		reader.readAsDataURL(blob);
	});
}

document.body.addEventListener("paste", (event) => {
	const clipboardData = event.clipboardData || event.originalEvent.clipboardData;
	const imageItem = [...clipboardData.items].find((item) =>
		item.type.includes("image/")
	);

	if (!imageItem) {
		console.log("No image items in clipboard");
		return;
	}

	const blob = imageItem.getAsFile();

	if (blob === null) {
		console.log("Can not get image data from clipboard item");
		return;
	}

	loadBlobImageSrc(blob).then((src) => {
		hideMessage();
		setImage(src);
        
        const base64Data = src.replace(/^data:image\/[a-zA-Z]+;base64,/, "");
        dmx.global.set('pasted_image', base64Data);
	});
});
</script>

You can see I added a few things to the original code:

  1. const base64Data = src.replace(/^data:image\/[a-zA-Z]+;base64,/, ""); because the base64tofile extension need the string withouth the header.
  2. dmx.global.set('pasted_image', base64Data); that will set the pasted_image used on the hidden text input.

Also changed class container to containerimage because we don't want to fight with the original one..

Hope it helps :slight_smile: