From 1a1e37db7a694fa246d5655fbf8d3bbaabf72333 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 18 Mar 2018 19:20:28 +0100
Subject: [PATCH] Improved upload API
---
assets/js/component/copy.js | 4 ++--
assets/js/component/fake-input.js | 4 ++--
assets/js/page_upload.js | 3 ++-
assets/sass/_page_upload.sass | 6 +++---
templates/upload.html | 32 ++++++++-----------------------
5 files changed, 17 insertions(+), 32 deletions(-)
diff --git a/assets/js/component/copy.js b/assets/js/component/copy.js
index 8ea2648..369e47d 100644
--- a/assets/js/component/copy.js
+++ b/assets/js/component/copy.js
@@ -1,12 +1,12 @@
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";
}
});
}
diff --git a/assets/js/component/fake-input.js b/assets/js/component/fake-input.js
index 3122c56..791a105 100644
--- a/assets/js/component/fake-input.js
+++ b/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";
});
}
diff --git a/assets/js/page_upload.js b/assets/js/page_upload.js
index 461e50a..147de44 100644
--- a/assets/js/page_upload.js
+++ b/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) => {
diff --git a/assets/sass/_page_upload.sass b/assets/sass/_page_upload.sass
index ac34a99..44c83dd 100644
--- a/assets/sass/_page_upload.sass
+++ b/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
diff --git a/templates/upload.html b/templates/upload.html
index 09d61bd..16e976d 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -1,30 +1,14 @@
{{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 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>
-{{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}}
- <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 class="uploading images">
<div class="sidebar">
<div class="url">
--
GitLab