Make form also clickable

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();

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>