Refactored frontend + added template engine

frontend/templates/upload.html

@@ -0,0 +1,83 @@
+{% extends "base.html" %}
+{% block title %}Upload Document{% endblock %}
+
+{% block content %}
+<div class="flex flex-col items-center justify-center p-8">
+  <h1 class="text-3xl font-bold mb-8">Upload a File</h1>
+
+  <div
+    id="dropZone"
+    class="border-4 border-dashed border-gray-300 rounded-lg p-8 bg-white text-center w-full max-w-lg"
+    ondrop="handleDrop(event)"
+    ondragover="handleDragOver(event)"
+  >
+    <p class="text-gray-500 mb-4">
+      Drag & drop a file here, or click to select a file.
+    </p>
+    <input
+      id="fileInput"
+      type="file"
+      class="hidden"
+      onchange="handleFileSelect(event)"
+    />
+  </div>
+
+  <div id="statusMessage" class="mt-4 text-gray-700"></div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  // Drag-and-drop / file input logic
+  const dropZone = document.getElementById("dropZone");
+  const fileInput = document.getElementById("fileInput");
+  const statusMessage = document.getElementById("statusMessage");
+
+  dropZone.addEventListener("click", () => fileInput.click());
+
+  function handleDragOver(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    dropZone.classList.add("bg-gray-100");
+  }
+
+  function handleDrop(e) {
+    e.preventDefault();
+    dropZone.classList.remove("bg-gray-100");
+    if (e.dataTransfer.files.length) {
+      uploadFile(e.dataTransfer.files[0]);
+    }
+  }
+
+  function handleFileSelect(e) {
+    if (e.target.files.length) {
+      uploadFile(e.target.files[0]);
+    }
+  }
+
+  async function uploadFile(file) {
+    // Check file type
+    const acceptedTypes = ['application/pdf'];
+    if (!acceptedTypes.includes(file.type)) {
+      statusMessage.textContent = `Error: Only PDF files are accepted.`;
+      return;
+    }
+    statusMessage.textContent = `Uploading ${file.name}...`;
+    try {
+      let formData = new FormData();
+      formData.append("file", file);
+      const response = await fetch("/ui-upload", {
+        method: "POST",
+        body: formData,
+      });
+      if (!response.ok) {
+        throw new Error(`Upload failed with status ${response.status}`);
+      }
+      const result = await response.json();
+      statusMessage.textContent = `File ${file.name} uploaded. Task ID: ${result.task_id}`;
+    } catch (err) {
+      statusMessage.textContent = `Error: ${err}`;
+    }
+  }
+</script>
+{% endblock %}