From b641f8b0323fac47207c8ef5c023bec709c5ea63 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 18 Mar 2018 19:44:59 +0100
Subject: [PATCH] Improved upload API
---
assets/js/page_upload.js | 10 ++++++----
assets/sass/_page_upload.sass | 7 +++++--
2 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/assets/js/page_upload.js b/assets/js/page_upload.js
index 701ad45..71d6532 100644
--- a/assets/js/page_upload.js
+++ b/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);
diff --git a/assets/sass/_page_upload.sass b/assets/sass/_page_upload.sass
index 09c38db..3159fba 100644
--- a/assets/sass/_page_upload.sass
+++ b/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
--
GitLab