Last active
January 22, 2020 16:06
-
-
Save MaverickEsq/ffbddeb90e420feb540c2f456451d16a to your computer and use it in GitHub Desktop.
Browser uploader for tempal style curl pastebins
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>tempal up</title> | |
<script> | |
// Set this to the destination host | |
var host = '//paste.bin'; | |
// Set this to the destination host name | |
// ie "tempal" for temp.al | |
var name = 'tempal'; | |
</script> | |
<style> | |
#container { | |
height: 100%; | |
display: table; | |
margin: auto; | |
} | |
#content { | |
display: table-cell; | |
vertical-align: middle; | |
position: relative; | |
} | |
#icon { | |
width: 45vw; | |
height: 25vw; | |
display: table-cell; | |
vertical-align: middle; | |
text-align: center; | |
} | |
#art { | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
pre { | |
font-family: monospace; | |
white-space: pre; | |
} | |
#status { | |
margin:auto; | |
} | |
.loading:after { | |
display: inline-block; | |
animation: dotty steps(1,end) 1s infinite; | |
content: ''; | |
} | |
@keyframes dotty { | |
0% { content: ' '; } | |
25% { content: '. '; } | |
50% { content: '.. '; } | |
75% { content: '...'; } | |
100% { content: ' '; } | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div id="content"> | |
<span id="icon"> | |
<pre id="art"> | |
_______________________________________________________ | |
| | | |
| | | |
| ___ | | |
| / \ | | |
| / \ | | |
| / \ | | |
| / \ | | |
| / \ | | |
| __ /___ ___\ __ | | |
| | | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
| | | |_____| | | | | |
| | |_________________| | | | |
| |_______________________| | | |
| _ _ ___ _ ____ ____ ___ | | |
| | | |__] | | | |__| | \ | | |
| |__| | |___ |__| | | |__/ | | |
| | | |
| | | |
|_______________________________________________________| | |
</pre> | |
<pre id="status"> </pre> | |
</span> | |
</div> | |
</div> | |
<script> | |
function getPaste(e) { | |
// If its files, treat it as files | |
// Otherwise, item | |
if (e.files.length > 0) { | |
var item = e.files[0]; | |
} else { | |
var item = e.items[0]; | |
} | |
// If its text, upload as string | |
if (item.kind == "string") { | |
item.getAsString(function (e) { upload(e); }); | |
} else { | |
upload(item); | |
} | |
} | |
function upload(p) { | |
// Make it say Uploading... | |
var status = document.getElementById("status"); | |
status.innerText = " UPLOADING"; | |
status.className = "loading"; | |
// Curling things | |
// Then crap to get text from the response object | |
let form = new FormData(); | |
form.append(name, p); | |
fetch(host, {method: "POST", body: form}) | |
.then(function(response) { | |
return response.text().then(function(text) { | |
gieb(text); | |
}) | |
}); | |
} | |
function gieb (u) { | |
// Put the result in the page | |
var status = document.getElementById("status"); | |
status.innerText = u; | |
status.className = ""; | |
} | |
// Adding paste | |
window.addEventListener("paste", function(e){ getPaste(e.clipboardData); }, false); | |
// Overriding defaults | |
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { document.getElementsByTagName("BODY")[0].addEventListener(eventName, preventDefaults, false)}) | |
function preventDefaults (e) { | |
e.preventDefault() | |
e.stopPropagation() | |
} | |
// Adding drag and drop | |
document.getElementsByTagName("BODY")[0].addEventListener('drop', function(e){ getPaste(e.dataTransfer); }, false); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment