<!DOCTYPE html>
<html>
<head>
  <title>Paste Image Example</title>
  <style>
    #preview {
      max-width: 400px;
      margin-top: 20px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>

<h2>Paste an Image (Ctrl+V)</h2>

<div id="pasteArea"
     contenteditable="true"
     style="width:400px;height:100px;border:1px solid black;padding:10px;">
  Click here and paste an image
</div>

<img id="preview" />

<script>

  const pasteArea = document.getElementById("pasteArea");
  const preview = document.getElementById("preview");

alert(8);
  pasteArea.addEventListener("paste", (event) => {
    const items = event.clipboardData.items;

    for (const item of items) {
      if (item.type.startsWith("image/")) {
        const file = item.getAsFile();

		console.log("Image pasted:", file);

        const reader = new FileReader();

        reader.onload = (e) => {
          preview.src = e.target.result;
        };

        reader.readAsDataURL(file);
      }
    }
	event.preventDefault();
  });
</script>

</body>
</html>