Commit b641f8b0 authored by Janne Koschinski's avatar Janne Koschinski

Improved upload API

parent 508a9bf4
......@@ -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);
......
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment