clipthing.html: Difference between revisions

Latest revision as of 02:41, 18 September 2024

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>
@@ Line 157: / Line 157: @@
      </script>
 </body>
 </html>
 </syntaxhighlight>