Improved upload API

assets/js/component/copy.js

 function initCopy() {
-    Array.prototype.slice.call(document.querySelectorAll("button.copy[data-target]:not([data-bound-copy])")).forEach((button) => {
+    Array.prototype.slice.call(document.querySelectorAll("button.copy[data-target]:not([data-bound_copy])")).forEach((button) => {
         const target = document.querySelector(button.dataset["target"]);
         if (target) {
             button.addEventListener("click", () => {
                 target.select();
                 document.execCommand("Copy");
             });
-            elem.dataset["bound-copy"] = "true";
+            button.dataset["bound_copy"] = "true";
         }
     });
 }

assets/js/component/fake-input.js

@@ -15,12 +15,12 @@ const changeListener = (event) => {
 };
 
 function initFakeInput() {
-    Array.prototype.slice.call(document.querySelectorAll(".fake-input[contenteditable]:not([bound-fake-input])")).forEach(elem => {
+    Array.prototype.slice.call(document.querySelectorAll(".fake-input[contenteditable]:not([data-bound_fake_input])")).forEach(elem => {
         elem.addEventListener("input", changeListener);
         if (elem.dataset["multiline"] === undefined) {
             elem.addEventListener("keypress", keyListener);
         }
-        elem.dataset["bound-fake-input"] = "true";
+        elem.dataset["bound_fake_input"] = "true";
     });
 }
 

assets/js/page_upload.js

@@ -9,11 +9,12 @@ function postData(url, data) {
     }).then(response => response.json())
 }
 
+const page = document.querySelector(".page.upload");
 const form = document.querySelector("form.upload");
 const element = document.querySelector("form.upload input[type=file]");
 const results = document.querySelector(".uploading.images");
 element.addEventListener("change", () => {
-    form.classList.add("submitted");
+    page.classList.add("submitted");
     for (let file of element.files) {
         const reader = new FileReader();
         reader.addEventListener("load", (e) => {

assets/sass/_page_upload.sass

@@ -53,8 +53,6 @@
         top: 0
         bottom: 0
         opacity: 0
-    &.submitted
-      display: none
   .uploading.images
     display: flex
     flex-direction: row
@@ -172,5 +170,7 @@
     .fake-input[contenteditable]:empty:before
       opacity: 0.4
       content: attr(placeholder)
-  form.upload:not(.submitted)+.uploading.images
+  &.submitted form.upload
+    display: none
+  &:not(.submitted) .uploading.images
     display: none
\ No newline at end of file

templates/upload.html

 {{define "title"}}Upload | i.k8r{{end}}
 {{define "content"}}
-<div class="page upload container centered">
-{{range .Results}}
-{{if .Success}}
-    <div class="alert success">
-        <h2>Upload of {{.Id}} finished. <a href="/{{.Id}}">View</a>.</h2>
-    </div>
-{{else}}
-    <div class="alert error">
-    {{if .Id}}
-        <h2>Upload of {{.Id}} failed.</h2>
-    {{else}}
-        <h2>Upload failed.</h2>
-    {{end}}
-    {{range .Errors}}
-        <pre>{{.}}</pre>
-    {{end}}
-    </div>
-{{end}}
-{{end}}
+<div class="page upload">
+    <div class="container centered">
         <form class="upload" action="/upload/" method="POST" enctype="multipart/form-data">
             <label>
                 <span class="text">Select Files</span>
                 <input type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.webp,.mp4,.mov" multiple/>
             </label>
         </form>
+    </div>
     <div class="uploading images">
         <div class="sidebar">
             <div class="url">