added first draft of upload interface

2025-03-24 16:52:47 +01:00
parent 97dfe27113
commit e526f691ef
4 changed files with 137 additions and 0 deletions
@@ -0,0 +1,89 @@
+<!-- File: frontend/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Document Processor - Upload</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <script>
+      // Optional: Additional JS for drag-and-drop, or you can keep it inline.
+    </script>
+  </head>
+  <body class="bg-gray-50 h-screen flex flex-col items-center justify-center">
+    <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-1/2"
+      ondrop="handleDrop(event)"
+      ondragover="handleDragOver(event)"
+    >
+      <p class="text-gray-500">
+        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>
+
+    <script>
+      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) {
+        statusMessage.textContent = `Uploading ${file.name}...`;
+
+        try {
+          // We'll POST the file to /upload
+          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>
+  </body>
+</html>