More actions
To try this thing out go to https://kserver.nu/tools/clipthing.php
<!DOCTYPE html>
<html>
<head>
<title>ClipThing</title>
<style>
html {
color: #ffffff;
background-color: #000000;
}
#stuff {
width: 100%;
}
.item {
background-color: #111111;
margin-bottom: 10px;
padding: 5px;
width: 100%;
}
.content {
background-color: #282828;
}
</style>
</head>
<body>
Paste or drag and drop some text, html or images here
<div id="stuff"></div>
<script>
function doUpload() {
console.log(this.parentNode)
let imgs = this.parentNode.parentNode.getElementsByTagName('img')
let img = imgs[0]
console.log(img)
var imgdata = img.src.split(',', 2)[1]
var imgbin = atob(imgdata)
var formdata = new FormData()
let file = new File([imgbin], 'image/png', { type: 'image/png' })
formdata.append('img', file)
fetch('http://kserver.nu/api/nonexistent.php', {
method: 'POST',
body: formdata,
})
.then(d => d.text())
.then(d => {
console.log(d)
let el = document.createElement('div')
el.classList.add('item')
el.style.whiteSpace = 'pre'
el.textContent = d
append(el)
})
}
function onDataTransfer(data) {
let items = data.items
var selected = null;
var itemtype = null;
var ignorerest = false;
for (let i = 0; i < items.length; i++) {
let item = items[i]
let type = item.type
console.log(item)
if (ignorerest) continue
// Select whatever appears the first time
if (selected === null) {
selected = item
itemtype = type
continue
}
// If there ever is an image we want it
if (type.indexOf('image/') === 0) {
selected = item
itemtype = type
ignorerest = true
continue
}
// We want HTML if there is anything over text and alike
if (selected !== 'text/html' && type === 'text/html') {
selected = item
itemtype = type
}
//item.getAsString(d => console.log(d))
}
if (itemtype.indexOf('image/') === 0) {
var a = selected.getAsFile()
console.log('file', itemtype, a)
let f = new FileReader()
f.readAsDataURL(a)
f.onload = () => {
let el = document.createElement('div')
el.classList.add('item')
let info = document.createElement('div')
info.classList.add('info')
let typ = document.createElement('span')
typ.textContent = itemtype
info.append(typ)
el.append(info)
btn = document.createElement('button')
btn.textContent = 'Upload'
btn.onclick = doUpload
info.append(btn)
let img = document.createElement('img')
img.src = f.result
el.append(img)
append(el)
}
} else {
let el = document.createElement('div')
el.classList.add('item')
let info = document.createElement('div')
info.classList.add('info')
let typ = document.createElement('span')
typ.textContent = itemtype
info.append(typ)
el.append(info)
let content = document.createElement('div')
content.classList.add('content')
el.append(content)
console.log('string', itemtype)
if (itemtype === 'text/html') {
selected.getAsString(d => {
content.innerHTML = d
append(el)
})
} else {
selected.getAsString(d => {
el.style.whiteSpace = 'pre'
content.textContent = d
append(el)
})
}
}
}
function onPaste(e) {
onDataTransfer(e.clipboardData);
}
function onDragover(e) {
e.preventDefault()
}
function onDrop(e) {
e.preventDefault()
onDataTransfer(e.dataTransfer)
}
function append(elem) {
stuff.insertBefore(elem, stuff.firstChild)
}
var stuff = document.getElementById('stuff')
document.addEventListener('paste', onPaste)
document.addEventListener('dragover', onDragover)
document.addEventListener('drop', onDrop)
</script>
</body>
</html>