2 files changed, 64 insertions, 17 deletions
diff --git a/yaksh/templates/yaksh/question.html b/yaksh/templates/yaksh/question.html
index 3b73781..17305b6 100644
--- a/yaksh/templates/yaksh/question.html
+++ b/yaksh/templates/yaksh/question.html
@@ -290,12 +290,13 @@ question_type = "{{ question.type }}";
                 </ul>
             </div>
             {% endif %}
+            <br>
             {% if qrcode %}
-                <img src="{{ qrcode.image.url }}">
+                <img src="{{ qrcode.image.url }}" width="200" height="200">
             {% else %}
-              <a class="active btn btn-outline-primary " href="#"data-toggle="tooltip"
-                  title="Upload from any device using the QR Code"
-                  onclick="call_skip('{% url 'yaksh:generate_qrcode' paper.id question.id module.id %}')">Generate QR Code</a>
+              <br>
+              <a class="active btn btn-outline-primary " href="{% url 'yaksh:generate_qrcode' paper.id question.id module.id %}" data-toggle="tooltip"
+                  title="Upload from any device using the QR Code">Generate QR Code</a>
             {% endif %}
             <p></p>
           {% endif %}
diff --git a/yaksh/templates/yaksh/upload_file.html b/yaksh/templates/yaksh/upload_file.html
index 04d8b09..e25e8e7 100644
--- a/yaksh/templates/yaksh/upload_file.html
+++ b/yaksh/templates/yaksh/upload_file.html
@@ -1,16 +1,10 @@
+{% load static %}
 <html>
 <title> Upload File </title>
-
-<script>
-function validate(){
-    uploaded_file = document.getElementById("assignment").value;
-    if(uploaded_file == ""){
-        $("#upload_alert").modal("show");
-        return false;
-    }
-    return true;
-}
-</script>
+<script language="JavaScript" type="text/javascript" src="{% static 'yaksh/js/jquery-3.3.1.min.js' %}"></script>
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.8.1/dropzone.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.8.1/basic.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.8.1/min/dropzone.min.js"></script>
 <style>
 div, input, button {
     font-size: x-large;
@@ -24,9 +18,61 @@ div, input, button {
   <form id="code" action="{% url 'yaksh:upload_file' key %}" method="post" enctype="multipart/form-data">
       {% csrf_token %}
         <h3>Upload assignment file for {{ question.summary }}</h3>
-        <input type=file id="assignment" name="assignment" multiple="">
-        <button class="btn btn-success" type="submit" name="check" id="check" onClick="return validate();">Upload</button>
+        <div class="dropzone needsclick dz-clickable" id="dropzone_file">
+          <div class="dz-message needsclick">
+            <button type="button" class="dz-button">
+              Drop files here or click to upload.
+            </button>
+          </div>
+        </div>
+        <br>
+        <button class="btn btn-success" type="submit" name="check" id="check">Upload</button>
   </form>
 {% endif %}
 </div>
 </html>
+<script>
+    Dropzone.autoDiscover = false;
+    var submitfiles;
+    $(document).ready(function(){
+        var filezone = $("div#dropzone_file").dropzone({
+            url: $("#code").attr("action"),
+            parallelUploads: 10,
+            uploadMultiple: true,
+            maxFiles:20,
+            paramName: "assignment",
+            autoProcessQueue: false,
+            init: function() {
+              var submitButton = document.querySelector("#check");
+              myDropzone = this;
+              submitButton.addEventListener("click", function(e) {
+                if (myDropzone.getQueuedFiles().length === 0) {
+                  alert("Please select a file and upload");
+                  e.preventDefault();
+                  return;
+                }
+                if (myDropzone.getAcceptedFiles().length > 0) {
+                  if (submitfiles === true) {
+                      submitfiles = false;
+                      return;
+                  }
+                  e.preventDefault();
+                  myDropzone.processQueue();
+                  myDropzone.on("complete", function () {
+                      submitfiles = true;
+                      $('#check').trigger('click');
+                  });
+                }
+              });
+            },
+            success: function (file, response) {
+              document.open();
+              document.write(response);
+              document.close();
+            },
+            headers: {
+                "X-CSRFToken": document.getElementById("code").elements[0].value
+            }
+        });
+    });
+</script>