upload form now drag n drop box

evidence/templates/upload.html

@@ -8,23 +8,119 @@
   </div>
 </div>
 
-<!-- override invalid-feedback class -->
 <style>
-  .invalid-feedback {
-    color: #670000; 
-    font-size: 1rem; 
+  .drop-area {
+    width: 320px;
+    padding: 1.5rem;
+    background: white;
+    border: 2px dashed #ccc;
+    border-radius: 12px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .drop-area:hover, .drop-area.dragover {
+    border-color: #007bff;
+    background: #f8f9fa;
+  }
+
+  .drop-area.dragover {
+    transform: scale(1.05);
   }
   </style>
 
+  
 {% load django_bootstrap5 %}
-<form role="form" method="post" enctype="multipart/form-data">
-{% csrf_token %}
+<form role="form" method="post" enctype="multipart/form-data" class="needs-validation row d-flex justify-content-center " novalidate>
+  {% csrf_token %}
 
-{% bootstrap_form form alert_error_type="none" error_css_class="alert alert-danger alert-icon alert-icon-border" %}
-      <div class="form-actions-no-box">
-  <a class="btn btn-grey"       href="{% url 'dashboard:unassigned_devices' %}">{% translate "Cancel" %}</a>
-  <input class="btn btn-green-admin" type="submit" name="submit" value="{% translate 'Save' %}" />
-</div>
+  <!-- Drag n drop -->
+  <div id="drop-zone" class="drop-area rounded p-5 text-center">
+    <i class="bi bi-upload fs-1 mb-3"></i>
+    <p class="text-muted mb-0">{% translate "Drag and drop here, or click to select manually" %}</p>
 
+    {# support for both evidence file and spreadsheet forms #}
+    {% if form.evidence_file %}
+      {% bootstrap_form form exclude="evidence_file" alert_error_type="none" error_css_class="alert alert-danger" %}
+      <input type="file" id="file-input" name="{{ form.evidence_file.html_name }}" class="visually-hidden" {% if form.evidence_file.field.widget.attrs.multiple %}multiple{% endif %}>
+    {% elif form.file_import %}
+      {% bootstrap_form form exclude="file_import" alert_error_type="none" error_css_class="alert alert-danger" %}
+      <input type="file" id="file-input" name="{{ form.file_import.html_name }}" class="visually-hidden">
+    {% endif %}
+
+  </div>
+    <!-- File Preview -->
+    <div id="file-preview" class="mt-3 text-center ">
+    <ul id="file-list" class="list-unstyled"></ul>
+
+  {% if form.evidence_file.errors or form.file_import.errors %}
+    <div class="text-center mt-2">
+      <ul class="list-unstyled text-danger mb-0">
+        {% for error in form.evidence_file.errors %}
+          <li class="font-weight-bold" >{{ error }}</li>
+        {% endfor %}
+        {% for error in form.file_import.errors %}
+          <li>{{ error }}</li>
+        {% endfor %}
+      </ul>
+    </div>
+  {% endif %}
+
+  </div>
+
+  <div class="d-flex justify-content-center gap-3 mt-4">
+    <a class="btn btn-outline-secondary" href="{% url 'dashboard:unassigned_devices' %}">{% translate "Cancel" %}</a>
+    <button type="submit" class="btn btn-success">
+      <i class="bi bi-upload me-2"></i>{% translate "Upload" %}
+    </button>
+  </div>
 </form>
+
+<script>
+
+  document.addEventListener("DOMContentLoaded", () => {
+    const dropZone = document.getElementById("drop-zone");
+    const fileInput = document.getElementById("file-input");
+    const filePreview = document.getElementById("file-preview");
+    const fileList = document.getElementById("file-list");
+
+    dropZone.addEventListener("click", () => fileInput.click());
+    fileInput.addEventListener("change", (event) => {
+      updateFilePreview(event.target.files);
+    });
+
+    // Handle drag and drop events
+    dropZone.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      dropZone.classList.add("border-primary", "bg-light");
+    });
+    dropZone.addEventListener("dragleave", () => {
+      dropZone.classList.remove("border-primary", "bg-light");
+    });
+
+    dropZone.addEventListener("drop", (event) => {
+      event.preventDefault();
+      dropZone.classList.remove("border-primary", "bg-light");
+      fileInput.files = event.dataTransfer.files;
+      updateFilePreview(event.dataTransfer.files);
+    });
+
+    // Function to update the file preview
+    function updateFilePreview(files) {
+      fileList.innerHTML = "";
+      if (files.length > 0) {
+        filePreview.classList.remove("d-none");
+        Array.from(files).forEach((file) => {
+          const listItem = document.createElement("li");
+          listItem.textContent = file.name;
+          fileList.appendChild(listItem);
+        });
+      } else {
+        filePreview.classList.add("d-none");
+      }
+    }
+  });
+</script>
+
 {% endblock %}