Improved upload API

assets/js/page_upload.js

@@ -30,6 +30,9 @@ element.addEventListener("change", () => {
             image_title.setAttribute("placeholder", "Title");
             image_container.appendChild(image_title);
 
+            const image_link = document.createElement("a");
+            image_link.classList.add("image");
+
             const image_progress = document.createElement("div");
             image_progress.classList.add("progress");
 
@@ -37,13 +40,12 @@ element.addEventListener("change", () => {
             image_progress_indeterminate.classList.add("indeterminate");
 
             image_progress.appendChild(image_progress_indeterminate);
-            image_container.appendChild(image_progress);
+            image_link.appendChild(image_progress);
 
-            const image_link = document.createElement("a");
-            image_link.classList.add("image");
             const image = document.createElement("img");
             image.src = dataUrl;
             image_link.appendChild(image);
+
             image_container.appendChild(image_link);
 
             const image_description = document.createElement("p");
@@ -60,6 +62,7 @@ element.addEventListener("change", () => {
             data.append("file", file, file.name);
 
             postData("/upload/", data).then((json) => {
+                image_container.classList.remove("uploading");
                 if (json.success) {
                     image_link.href = "/" + json.id;
                     image.src = "/" + json.id;
@@ -68,7 +71,6 @@ element.addEventListener("change", () => {
                     image_error.classList.add("alert", "error");
                     image_error.innerText = JSON.stringify(json.errors);
                     image_container.insertBefore(image_error, image_description);
-                    image_container.classList.remove("uploading");
                 }
 
                 console.log(json);

assets/sass/_page_upload.sass

@@ -148,7 +148,9 @@
             border-top-left-radius: 4px
             border-top-right-radius: 4px
       .progress
-        position: relative
+        top: -4px
+        left: 0
+        right: 0
         height: 4px
         display: block
         background-color: rgba(255, 193, 7, 0.2)
@@ -176,13 +178,14 @@
             animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite
             animation-delay: 1.125s
       &:not(.uploading) .progress
-        display: none
+        opacity: 0
       .image
         background: #000
         display: flex
         flex-direction: row
         justify-content: center
         align-items: start
+        position: absolute
         img
           max-width: 100%
       .description