JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="pasteArea" placeholder="Paste Image Here"></textarea>
<br />
<img id="pastedImage"></img>
<hr />
<textarea class="pasteBox" placeholder="Paste Image Here"></textarea>
<br />
<img class="pasted"></img>

CSS

img {
    max-width: 400px;
}

JavaScript

function isMouseEventSupported(eventName) {
     var el = document.createElement('textarea');
     eventName = 'on' + eventName;
     var isSupported = (eventName in el);
     if (!isSupported) {
         el.setAttribute(eventName, 'return;');
         isSupported = typeof el[eventName] == 'function';
     }
     el = null;
     return isSupported;
 }

alert(isMouseEventSupported('paste'));

 $('.pasteBox').bind('paste', function (event) {
     var clipboardData = event.clipboardData || event.originalEvent.clipboardData;
     var items = clipboardData.items;
     console.log(JSON.stringify(items)); // will give you the mime types
     // find pasted image among pasted items
     var blob;
     for (var i = 0; i < items.length; i++) {
         if (items[i].type.indexOf("image") === 0) {
             blob = items[i].getAsFile();
         }
     }
     // load image if there is a pasted image
     if (blob !== null) {
         var reader = new FileReader();
         reader.onload = function (event) {
             console.log(event.target.result); // data url!
             $("img.pasted").attr('src', event.target.result);
         };
         reader.readAsDataURL(blob);
     }
 });