Add css for dropzone upload

PDMI/static/store/dropzone-style.css

@@ -0,0 +1,3 @@
+.dropzone {
+    border-style: dashed;
+}

PDMI/store/templates/store/store-navbar.html

@@ -8,7 +8,7 @@
         </a>
         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
             <a class="dropdown-item" href="#">Profile</a>
-            <a class="dropdown-item" href="#">Upload module</a>
+            <a class="dropdown-item" href="{% url 'upload' %}">Upload module</a>
             <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
         </div>
     </li>

PDMI/store/templates/store/upload.html

@@ -3,16 +3,30 @@
 {% block extra_static %}
 <script type="text/javascript" src="{% static 'dropzone-5.7.0/dist/dropzone.js' %}"></script>
 <link rel="stylesheet" href="{% static 'dropzone-5.7.0/dist/dropzone.css' %}">
+<link rel="stylesheet" href="{% static 'store/dropzone-style.css' %}">
 {% endblock extra_static %}
+{% block navbar %}
+    {% include "store/store-navbar.html" %}
+{% endblock navbar %}
 {% block body %}
-<form class="dropzone clsbox" enctype="multipart/form-data" method="post" id="multiFileUpload">
+<main>
+    <div class="container pt-5">
+        <form class="dropzone" enctype="multipart/form-data" method="post" id="multiFileUpload">
             <div class="fallback">
                 <input type="file" name="file" id="file" multiple />
                 <input type="submit" value="Upload" />
             </div>
-</form>
+        </form>
+        <div class="d-flex justify-content-between my-3">
+            <div></div> <!-- Left -->
+            <div class="">  <!-- Right -->
+                <button id="submit-all" class="btn btn-primary">Sumbit all files</button>
+                <button id="clear-all" class="btn btn-danger">Clear queue</button>
+            </div>
+        </div>
+    </div>
 
-<script type="text/javascript">
+    <script type="text/javascript">
         function getCookie(name) {
             let cookieValue = null;
             if (document.cookie && document.cookie != '') {
@@ -34,29 +48,18 @@
             crossDomain: false,
             paramName: "file",
             parallelUploads: 5,
-        autoProcessQueue: true,
+            autoProcessQueue: false,
             filesizeBase: 1024,
             maxFilesize: 10000,
             dictRemoveFileConfirmation: null,
             init: function() {
+                myDropzone = this;
                 this.on('uploadprogress', function(file, progress, bytesSent) {
                     progress = bytesSent / file.size * 100;
-                console.log(filesizecalculation(bytesSent));
                 });
                 this.on("maxfilesexceeded", function(data) {
                     let res = eval('(' + data.xhr.responseText + ')');
                 });
-            this.on("addedfile", function(file) {
-                let removeButton = Dropzone.createElement("<button data-dz-remove " +
-                    "class='del_thumbnail btn btn-default'><span class='fas fa-trash'></span> Sil</button>");
-                let _this = this;
-                removeButton.addEventListener("click", function(e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    _this.removeFile(file);
-                });
-                file.previewElement.appendChild(removeButton);
-            });
                 this.on("error", function(file, message) {
                     console.log(message);
                     this.removeFile(file);
@@ -64,20 +67,17 @@
                 this.on('sending', function(file, xhr, formData) {
                     xhr.setRequestHeader("X-CSRFToken", csrftoken)
                 });
+                let submitButton = $('#submit-all');
+                submitButton.on("click", function() {
+                    myDropzone.processQueue();
+                });
+                let clearButton = $('#clear-all');
+                clearButton.on('click', function() {
+                    myDropzone.removeAllFiles();
+                })
             }
         });
-    Dropzone.prototype.filesize = function(size) {
-        filesizecalculation(size);
-    };
 
-    function filesizecalculation(size) {
-        if (size < 1024 * 1024) {
-            return "<strong>" + (Math.round(Math.round(size / 1024) * 10) / 10) + " KB</strong>";
-        } else if (size < 1024 * 1024 * 1024) {
-            return "<strong>" + (Math.round((size / 1024 / 1024) * 10) / 10) + " MB</strong>";
-        } else if (size < 1024 * 1024 * 1024 * 1024) {
-            return "<strong>" + (Math.round((size / 1024 / 1024 / 1024) * 10) / 10) + " GB</strong>";
-        }
-    }
-</script>
+    </script>
+</main>
 {% endblock body %}

PDMI/store/urls.py

@@ -23,5 +23,5 @@ urlpatterns = [
     path('login/', views.CustomLoginView.as_view(), name='login'),
     path('signup/', views.SignUpView.as_view(), name='signup'),
     path('logout/', LogoutView.as_view(), name='logout'),
-    path('upload/', views.FileFieldView.as_view(), name='upload'),
+    path('upload/', views.UploadView.as_view(), name='upload'),
 ]

PDMI/store/views.py

@@ -20,7 +20,7 @@ class CustomLoginView(BSModalLoginView):
     success_message = 'Success: You were successfully logged in.'
     extra_content = dict(success_url=reverse_lazy('index'))
 
-class FileFieldView(FormView):
+class UploadView(FormView):
     form_class = FileFieldForm
     template_name = 'store/upload.html'