gh-christianlouis-docuelevate/frontend/templates/upload.html

{% 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>

  <form action="/api/ui-upload" method="POST" enctype="multipart/form-data">
    <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)"
        name="file"
      />
    </div>
  </form>

  <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("/api/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 %}