Skip to content

Instantly share code, notes, and snippets.

@paulirish
Created May 7, 2018 17:18
Show Gist options
  • Save paulirish/cfde6507b4ef84f20f34ae1013c5e980 to your computer and use it in GitHub Desktop.
Save paulirish/cfde6507b4ef84f20f34ae1013c5e980 to your computer and use it in GitHub Desktop.
log the clipboard contents
document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';
function getPayload(item) {
const kind = item.kind;
switch (kind) {
case 'string': return new Promise(res => item.getAsString(res));
case 'file': return Promise.resolve(item.getAsFile());
default: throw new Error('unknown item kind! ' + kind);
}
}
function logObj(type, obj){
console.log(`%c ${type} event`, 'font-weight: bold', new Date().toLocaleTimeString());
const getPayloadAndType = item => {
const type = item.type;
return getPayload(item).then(payload => ({type, payload}));
};
Array.from(obj.items)
.sort((a,b) => a.type.localeCompare(b.type))
.forEach(item => Promise.resolve().then(_ => getPayloadAndType(item)).then(console.log));
}
document.onpaste = e => { logObj(e.type, e.clipboardData)};
document.ondrop = e => { e.preventDefault(); logObj(e.type, e.dataTransfer)};
document.ondragover = e => { e.preventDefault(); };
@Ikhan
Copy link

Ikhan commented Aug 23, 2018

+1

@armw4
Copy link

armw4 commented Oct 24, 2019

Awesome!

@Jaballadares
Copy link

Quickly threw this together just to see if I could. It now shows what gets printed in the console in a textarea as well.
https://codepen.io/jaballadares/pen/c3c654ff67aea423ccea385529497a95?editors=1111

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment