<!DOCTYPE HTML>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>box</title>
		<script>
			function upload() {
				let resourceId = "";
				token = document.getElementById("token");
				if (token == null) {
					token = "";
				} else {
					token = token.value;
				}
				f = document.getElementById("file").files[0];
				const xhr = new XMLHttpRequest();
				xhr.upload.addEventListener("progress", (e) => {
					p = document.getElementById("progress")
					ratio = e.loaded / e.total;
					perc = Math.floor(ratio * 100);
					p.innerHTML = perc + "%";
				});
				xhr.onreadystatechange = () => {
					if (xhr.readyState === 4) {
						if (xhr.status != 200) {
							if (xhr.status != 0) {
								document.getElementById("progress").innerHTML = "Error: " + xhr.status + " " + xhr.statusText;
							} else {
								document.getElementById("progress").innerHTML = "Error: unknown";
							}
						} else {
							document.getElementById("progress").innerHTML = "Done: " + resourceId;
						}
					}
					if (xhr.readyState === xhr.HEADERS_RECEIVED) {
						resourceId = xhr.getResponseHeader("X-Resource-ID");
					}
				}
				xhr.open("POST", "/upload", true);
				xhr.setRequestHeader("X-Upload-Token", token)
				xhr.send(f)
			}
		</script>
	</head>
	<body>
		<h1>Box</h1>
		<pre>Server for uploading files. Use the form here or send a POST request to /[filename] with the content of the file in the body.</pre>
		{{ if ne . "" }}
			<input type="text" id="token"/>
		{{end}}
		<input type="file" id="file"/><br/><br/>
		<button type="button" onclick="upload()">Upload</button>
		<span id="progress"></span>
	</body>
</html>
