Improved upload API

templates/upload.html

@@ -27,15 +27,38 @@
         <input type="submit" value="Upload"/>
         <p class="upload-label">Uploading…</p>
     </form>
+    <div class="uploading images"></div>
 </div>
 <script>
     const form = document.querySelector("form.upload");
     const element = document.querySelector("form.upload input[type=file]");
-    /*
+    const results = document.querySelector(".uploading.images");
     element.addEventListener("change", () => {
+        for (let file of element.files) {
+            const reader = new FileReader();
+            reader.addEventListener("load", (e) => {
+                const node = document.createElement("div");
+                node.classList.add("uploading");
+                node.classList.add("image");
+                const img = document.createElement("img");
+                img.src = e.target.result;
+                node.appendChild(img);
+                results.appendChild(node);
+                fetch({
+                    url: "/upload",
+                    credentials: "include"
+                }).then((response) => {
+                    return response.json()
+                }).then((json) => {
+                    const text = document.createElement("pre");
+                    text.innerText = JSON.stringify(json);
+                    node.appendChild(text);
+                });
+            });
+            reader.readAsDataURL(file);
+        }
         form.submit();
         form.classList.add("submitted");
     })
-    */
 </script>
 {{end}}
\ No newline at end of file