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,81 +3,81 @@
 {% 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">
-    <div class="fallback">
-        <input type="file" name="file" id="file" multiple />
-        <input type="submit" value="Upload" />
+<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>
+        <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>
-</form>
 
-<script type="text/javascript">
-    function getCookie(name) {
-        let cookieValue = null;
-        if (document.cookie && document.cookie != '') {
-            let cookies = document.cookie.split(';');
-            for (let i = 0; i < cookies.length; i++) {
-                let cookie = $.trim(cookies[i]);
-                if (cookie.substring(0, name.length + 1) == (name + '=')) {
-                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                    break;
+    <script type="text/javascript">
+        function getCookie(name) {
+            let cookieValue = null;
+            if (document.cookie && document.cookie != '') {
+                let cookies = document.cookie.split(';');
+                for (let i = 0; i < cookies.length; i++) {
+                    let cookie = $.trim(cookies[i]);
+                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
+                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                        break;
+                    }
                 }
             }
+            return cookieValue;
         }
-        return cookieValue;
-    }
-    let csrftoken = getCookie('csrftoken');
-    Dropzone.autoDiscover = false;
-    $('#multiFileUpload').dropzone({
-        url: "{% url 'upload' %}",
-        crossDomain: false,
-        paramName: "file",
-        parallelUploads: 5,
-        autoProcessQueue: true,
-        filesizeBase: 1024,
-        maxFilesize: 10000,
-        dictRemoveFileConfirmation: null,
-        init: function() {
-            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);
+        let csrftoken = getCookie('csrftoken');
+        Dropzone.autoDiscover = false;
+        $('#multiFileUpload').dropzone({
+            url: "{% url 'upload' %}",
+            crossDomain: false,
+            paramName: "file",
+            parallelUploads: 5,
+            autoProcessQueue: false,
+            filesizeBase: 1024,
+            maxFilesize: 10000,
+            dictRemoveFileConfirmation: null,
+            init: function() {
+                myDropzone = this;
+                this.on('uploadprogress', function(file, progress, bytesSent) {
+                    progress = bytesSent / file.size * 100;
                 });
-                file.previewElement.appendChild(removeButton);
-            });
-            this.on("error", function(file, message) {
-                console.log(message);
-                this.removeFile(file);
-            });
-            this.on('sending', function(file, xhr, formData) {
-                xhr.setRequestHeader("X-CSRFToken", csrftoken)
-            });
-        }
-    });
-    Dropzone.prototype.filesize = function(size) {
-        filesizecalculation(size);
-    };
+                this.on("maxfilesexceeded", function(data) {
+                    let res = eval('(' + data.xhr.responseText + ')');
+                });
+                this.on("error", function(file, message) {
+                    console.log(message);
+                    this.removeFile(file);
+                });
+                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();
+                })
+            }
+        });
 
-    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'