Javascript clipboardData.items and clipboardData.files are empty when pasting an image

Question

I'm trying to get an image from clipboard in javascript following this post: https://stackoverflow.com/a/6338207/6188783

document.onpaste = function (event) {
    console.log("paste triggered!");
    console.log("text: " + event.clipboardData.getData("text")); // shows text if it was pasted
    console.log("image: " + event.clipboardData.getData("image")); // always returns empty string p.s. I've also tried image/bmp and other formats 
    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(JSON.stringify(items)); // will give you the mime types
    for (index in items) {
        var item = items[index];
        if (item.kind === 'file') {
            var blob = item.getAsFile();
            var reader = new FileReader();
            reader.onload = function(event){
                console.log(event.target.result)}; // data url!
            reader.readAsDataURL(blob);
        }
    }
}

The issue is the clipboardData.items and clipboardData.files are always empty for files. When I'm pasting some text, it can be found in items array. Some guys from comments say that this answer is not working for new browsers, but I was not able to find how it can be done now. Please help!

Thanks in advance!

UPDATE

I figured out that the image is not getting handled when it's copied from i.e. folder. If I copy image from i.e. paint it is pushed into items array. How can I handle the image file copied from windows explorer then?