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 Files</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)"
      ondragleave="handleDragLeave(event)"
    >
      <p class="text-gray-500 mb-4">
        Drag & drop files here, or click to select files.
      </p>
      <input
        id="fileInput"
        type="file"
        class="hidden"
        onchange="handleFileSelect(event)"
        name="files"
        multiple
      />
      <div class="text-sm text-gray-500 mt-2">
        <p>Allowed types: PDF, Office documents (Word, Excel, PowerPoint, etc.), Images</p>
        <p>Maximum size: 500MB per file</p>
      </div>
    </div>
  </form>

  <div id="statusMessage" class="mt-4 text-gray-700"></div>
  <div id="uploadProgress" class="mt-4 w-full max-w-lg"></div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/upload.js"></script>
<script>
  // Drag-and-drop / file input logic
  const dropZone = document.getElementById("dropZone");
  const fileInput = document.getElementById("fileInput");
  const statusMessage = document.getElementById("statusMessage");
  const uploadProgress = document.getElementById("uploadProgress");

  dropZone.addEventListener("click", () => fileInput.click());

  function handleDragOver(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = "copy";
    dropZone.classList.add("bg-gray-100");
  }

  function handleDragLeave(e) {
    e.preventDefault();
    dropZone.classList.remove("bg-gray-100");
  }

  function handleDrop(e) {
    e.preventDefault();
    dropZone.classList.remove("bg-gray-100");
    if (e.dataTransfer.files.length) {
      // Clear previous upload progress
      uploadProgress.innerHTML = "";
      
      // Create progress container
      const progressContainer = document.createElement("div");
      progressContainer.className = "space-y-2";
      uploadProgress.appendChild(progressContainer);
      
      // Use the shared processFiles function
      processFiles(e.dataTransfer.files, progressContainer, statusMessage);
    }
  }

  function handleFileSelect(e) {
    if (e.target.files.length) {
      // Clear previous upload progress
      uploadProgress.innerHTML = "";
      
      // Create progress container
      const progressContainer = document.createElement("div");
      progressContainer.className = "space-y-2";
      uploadProgress.appendChild(progressContainer);
      
      // Use the shared processFiles function
      processFiles(e.target.files, progressContainer, statusMessage);
    }
  }
</script>
{% endblock %}