From 2b006b9efad0aafbb259dac2e6f450067650ae4b Mon Sep 17 00:00:00 2001
From: Frank Sauerburger <frank@sauerburger.com>
Date: Sun, 29 Mar 2020 12:02:05 +0200
Subject: [PATCH] Make form also clickable
---
assets/upload.js | 30 ++++++++++++------------------
templates/index.html | 2 +-
2 files changed, 13 insertions(+), 19 deletions(-)
diff --git a/assets/upload.js b/assets/upload.js
index a55f8ba..0bfb037 100644
--- a/assets/upload.js
+++ b/assets/upload.js
@@ -3,24 +3,13 @@ $(function() {
$("#dropzone").on("dragover", highlight);
$("#dropzone").on("dragleave", unhighlight);
$("#dropzone").on("drop", handleDrop);
-
-/*
- ;['dragenter', 'dragover'].forEach(eventName => {
- dropArea.addEventListener(eventName, highlight, false)
- })
-
- ;['dragleave', 'drop'].forEach(eventName => {
- dropArea.addEventListener(eventName, unhighlight, false)
- })
-
- function highlight(e) {
- dropArea.classList.add('highlight')
- }
-
- function unhighlight(e) {
- dropArea.classList.remove('highlight')
- }
- */
+ $("#dropzone input[type=file]").on("click", function(e) {
+ e.stopPropagation();
+ });
+ $("#dropzone input[type=file]").on("change", handleSelect);
+ $("#dropzone").on("click", function() {
+ $("#dropzone input[type=file]").trigger('click');
+ });
});
function highlight(e) {
@@ -41,6 +30,11 @@ function handleDrop(e) {
([...e.originalEvent.dataTransfer.files]).forEach(uploadFile);
}
+function handleSelect(e) {
+ $("#dropzone").addClass("drop-uploading");
+ ([...e.currentTarget.files]).forEach(uploadFile);
+}
+
function uploadFile(file) {
$("#dropzone").addClass("drop-uploading");
let formData = new FormData();
diff --git a/templates/index.html b/templates/index.html
index baa4d00..b94f651 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -24,6 +24,7 @@
Cannot find any printer!
</div>
{% else %}
+ <div id="messages"></div>
<div class="form-group row">
<label class="col-form-label col-md-2" htmlFor="printer">Printer</label>
<select id="printer" class="form-control col-md-10">
@@ -37,7 +38,6 @@
<input type="file" id="document" class="d-none" />
</div>
{% endif %}
- <div id="messages"></div>
</main>
</body>
</html>
--
GitLab