document.addEventListener("DOMContentLoaded", () => {
	const form = document.querySelector(".edit-upload-form");
	if (!form) return;

	const button = form.querySelector("button[type=submit]");
	button.addEventListener("click", (event) => {
		event.preventDefault();
		button.setAttribute("disabled", "true");

		const file = form.querySelector("input[type=file]").files[0];
		if (!file) return;

		const pageID = /^\/pages\/(\d+)\/edit$/.exec(window.location.pathname)[1];
		const progress = form.querySelector("progress");
		progress.style.visibility = "visible";

		const fd = new FormData();
		fd.append("_csrf_token", form.querySelector("input[type=hidden]").value);
		fd.append("file", file);

		// it's 2021 and fetch doesn't have progress support, smh
		const xhr = new XMLHttpRequest();
		xhr.upload.addEventListener("progress", (event) => {
			const newVal = event.loaded / event.total;
			if (newVal >= 1) {
				progress.removeAttribute("value");
			} else {
				progress.value = newVal;
			}
		});
		xhr.addEventListener("load", () => {
			window.location.reload();
		});
		xhr.addEventListener("error", (event) => {
			console.error(event);
			progress.style.visibility = "hidden";
			alert("Upload error");
		});
		xhr.addEventListener("abort", (event) => {
			console.error(event);
			progress.style.visibility = "hidden";
			alert("Upload aborted");
		});
		xhr.open("POST", `/pages/${pageID}/uploads`);
		xhr.send(fd);
	});
});