JSFiddle - React, Tailwind, and code Playground
HTML
<div id="pastearea" />
<img id="dest" src="" />
CSS
#pastearea {
width: 100px;
height: 100px;
background-color: blue;
}
JavaScript
$(function () {
console.log("ready");
$('#pastearea').on('paste', function (e) {
e.preventDefault();
console.debug("testing paste in safari");
var blob = e.originalEvent.clipboardData.items[0].getAsFile();
console.debug(blob);
var reader = new FileReader();
reader.onload = readerLoaded;
reader.readAsDataURL(blob);
});
});
function readerLoaded(e) {
$('#dest').attr('src', e.target.result);
}