Why clipboardData doesn't have screenshots data

Question

If I take a screenshot with my keyboard's 'Print screen' key, copy it and paste it into a plain <div contenteditable /> element, the screenshot will just work and displayed there as you can see here https://jsfiddle.net/2sf7benL/1/

However, if I add the paste event listener to the <div contenteditable /> element, and paste screenshots into it, nothing is captured in the clipboardData object as shown here https://jsfiddle.net/kds265Lv/2/

EDIT To add more context:

Steps to reproduce:

1. Press the 'Print Screen' key on your keyboard

2. Paste it in the demo below.

3. The screenshot will be displayed in the <div />.

div { height: 200px; width: 200px; border: 1px solid}

<div contenteditable></div>

That's the final result I desire. Now, instead of simply pasting it in the contenteditable, I listen to its paste event in order to access the screenshot in the clipboardData and finally render it using the URL.createObjectURL in the contenteditable:

function handlePaste (e) {
		var clipboardData, pastedData;

		// Stop data actually being pasted into div
		e.stopPropagation();
    e.preventDefault();

		// Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    console.log(clipboardData)// this is always empty when i paste screenshots
    console.log(clipboardData.files[0]) // TADA!!!
    // Do whatever with pasteddata
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

div {height: 200px; width:200px; border:1px solid}

<div id='editableDiv' contenteditable='true'></div>

Answer 1

Wow why am I so dumb... but to be fair Firefox and Chrome's consoles are misleading.. It's actually working but console.log event and event.clipboardData in chrome/FF gonna give you false negative results like empty arrays and length: 0 :(

So you just gotta dig deeper like so: event.clipboardData.files[0]

And you will see it!