monofile/pages/upload.html
2022-09-27 16:39:25 -07:00

140 lines
4.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>monofile</title>
<meta name="application-name" content="monofile">
<meta name="description" content="Discord-based filesharing">
<style>
* {
font-family: sans-serif;
}
h1,h2 {
text-align:center;
}
#content {
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background-color:white;
width:450px;
/*height:100%;*/
}
body {
background-color: darkgray;
}
#btnContainer {
width:calc( 100% - 50px );
height:50px;
position:relative;
left:50%;
transform:translate(-50%,0);
}
#uploadButton {
width:100%;
height:100%;
background-color: #66AAFF;
color:black;
font-weight:bold;
border:none;
position:absolute;
left:0px;
top:0px;
font-size:20px;
}
#uploadButton:hover {
border: 1px solid gray;
}
.note {
padding:5px;
position:relative;
width:calc( 100% - 60px );
left:25px;
border:1px solid #AAAAAAFF;
border-radius: 8px;
background-color: #AAAAAA66;
}
@media only screen and (max-width: 450px) {
#content {
position:fixed;
left:0%;
top:0%;
transform:translate(0%,0%);
background-color:white;
width:100%;
height:100%;
}
}
</style>
</head>
<body>
<div id="content">
<h1>
monofile
</h1>
<h2><em>Discord-based file sharing</em></h2>
<div class="note" style="border-color:#FFAAAAFF;background-color:#FFAAAA66">
Before sharing files, please remember:
<ul>
<li>Do NOT share sensitive information via monofile</li>
<li>Do NOT share illegal content via monofile</li>
<li>The owner of this instance reserves the right to remove your files</li>
</ul>
</div>
<div style="width:100%;height:25px"></div>
<div id="btnContainer"><button id="uploadButton">Upload file</button></div>
<p style="font-family:monospace;position:relative;width:calc( 100% - 50px );left:25px;text-align: center;">
Max filesize on instance: $MaxInstanceFilesize
</p>
<div style="width:100%;height:25px"></div>
</div>
</body>
<script>
let updateBtnTxt = (btntxt) => {document.getElementById("btnContainer").innerHTML = `<div class="note" style="width:calc( 100% - 10px );height:calc( 100% - 10px );position:absolute;left:0px;top:0px;"><p style="font-family:monospace;position:relative;width:calc( 100% - 50px );left:25px;text-align: center;">${btntxt}</p></div>`}
let FileUpload = document.createElement("input")
FileUpload.setAttribute("type","file")
document.getElementById("uploadButton").addEventListener("click",() => FileUpload.click())
FileUpload.addEventListener("input",() => {
if (FileUpload.files[0]) {
let file = FileUpload.files[0]
updateBtnTxt("Uploading file. This may take a while, so stay put.")
let xmlhttp = new XMLHttpRequest()
xmlhttp.addEventListener("error",function(e) {
updateBtnTxt(`Upload failed.<br/>${e.toString()}`)
console.error(e)
})
xmlhttp.addEventListener("load",function() {
if (xmlhttp.status == 200) {
updateBtnTxt(`Upload complete.<br/>https://${location.hostname}/download/${xmlhttp.responseText}`)
} else {
updateBtnTxt(`Upload failed.<br/>${xmlhttp.responseText}`)
}
})
let fd = new FormData()
fd.append('file',file)
xmlhttp.open("POST","/upload")
xmlhttp.send(fd)
}
})
</script>
</html>