WIP: Upload issues

This PR collects all commits related to upload issues #30 (closed), #18 (closed), and others

app/templates/upload.html

 {% extends "base.html" %}
+{% block head %}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.js"></script>
+{% endblock %}
 {% block body %}
     <h1>Upload your sequences to RAREFAN</h1>
     <p>
@@ -8,17 +12,56 @@
     RAREFAN accepts the following filename extensions (the part after the "."): ".fasta", ".fastn", ".fn", ".fna", ".fas" for
     DNA sequence data files; ".faa", "fa" for amino acid sequence files (RAYTs), and ".nwk" for newik formatted tree files.
     </p>
-    <form action="{{ url_for('upload') }}" method="post" enctype="multipart/form-data">
-        {{ upload_form.hidden_tag() }}
-        <p>
-            {{ upload_form.sequences.label }}
-            {{ upload_form.sequences(size=32, title="Select files to upload. Include DNA sequence files to analyse for potential REPINs,\
-amino acid sequence files (RAYTs) and tree files (.nwk) format for postprocessing and rendering the results graphs."  ) }}
-            {%  for error in upload_form.sequences.errors %}
-            <span style="color: red;">[ {{ error }} ]</span>
-            {%  endfor %}
-            <br>
-            {{ upload_form.upload(title="Click here start the upload.") }}
-        </p>
+    <p style="margin: 10px">
+     <form action="{{ url_for('upload') }}" class="dropzone" id="my_dropzone" method="post" enctype="multipart/form-data">
+         {{ confirmation_form.hidden_tag() }}
     </form>
-{%  endblock %}
\ No newline at end of file
+    </p>
+    <p style="margin: 10px">
+    <form method="post" enctype="multipart/form-data" id="confirm_upload">
+        {{ confirmation_form.hidden_tag() }}
+        {{ confirmation_form.confirm(title="Confirm file uploads") }}
+    </form>
+    </p>
+    <p style="margin: 10px">
+    <form action="{{ url_for('submit') }}" method="post" enctype="multipart/form-data" id="confirm_button">
+        {{ confirmation_form.hidden_tag() }}
+        {{ confirmation_form.proceed(title="Proceed to run configuration") }}
+    </form>
+    </p>
+    <script>
+        Dropzone.options.myDropzone = {
+            addRemoveLinks: true,
+            paramName: "file", // The name that will be used to transfer the file
+            maxFilesize: 10000, // MB
+            timeout: 60 * 60 * 1000, // 1 hr
+            acceptedFiles: '.fa, .fn, .fas, .fna, .faa, .fasta, .fastn, .nwk',
+            accept: function(file, done) {
+                 done();
+            },
+            autoProcessQueue: false,
+            parallelUploads: 10000,
+            uploadMultiple: true,
+
+            init: function() {
+                var mydz = this;
+
+                document.getElementById('confirm').disabled = true;
+                document.getElementById('proceed').disabled = true;
+                this.on("addedfile", function(file) {document.getElementById('confirm').disabled = false;});
+                this.on("completemultiple", function(files) {document.getElementById('proceed').disabled = false;
+                                                             document.getElementById('confirm').disabled = true;
+                                                             this.removeAllFiles(true);
+                                                             this.options.dictDefaultMessage="Upload complete. Please proceed to run submission.";
+                                                             this.disable();
+                                                             });
+                /* 'submit-dropzone-btn' is the ID of the form submit button */
+                document.getElementById('confirm').addEventListener("click", function (e) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  mydz.processQueue();
+                });
+            }
+        };
+    </script>
+{%  endblock %}