Christian Krakau-Louis
90 lines
2.6 KiB
HTML
90 lines
2.6 KiB
HTML
<!-- 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>
|