Upload index.html

templates/index.html

@@ -176,24 +176,20 @@ body { padding-bottom: 240px; }  /* add this */
 
 <div class="container">
   <!-- Upload card -->
-<section class="card panel">
-  <h3 class="section-title">Upload PDFs</h3>
- <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data" novalidate>
-    <div id="dropZone" class="dropzone" title="Drop PDFs here or click to choose">
-      <div class="dz-label">Drop PDFs here or click to choose</div>
-      <div class="dz-file" style="display:none;"></div>
-      <ul id="selectedList" style="list-style:none;margin:10px 0 0 0;padding:0;"></ul>
-    </div>
-
-     <label for="pdfUpload" class="btn">Choose PDFs</label>
-  <input id="pdfUpload" type="file" name="pdfs" accept="application/pdf" multiple style="display:none">
-   
-    <button type="button" id="addAnother" class="btn">Upload another PDF</button>
-    <button type="submit" class="btn">Upload & Annotate</button>
-    <a id="downloadOutput" href="#" style="display:none; margin-left:16px;">Download output file</a>
-  </form>
-</section>
-
+  <section class="card panel">
+    <h3 class="section-title">Upload a PDF</h3>
+    <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
+      <div id="dropZone" class="dropzone" title="Drop a PDF here or click to choose">
+        <div class="dz-label">Drop PDF here or click to choose</div>
+        <div class="dz-file" style="display:none;"></div>
+      </div>
+
+      <label for="pdfUpload" class="btn">Choose File</label>
+      <input id="pdfUpload" type="file" name="pdf" accept="application/pdf" required style="display:none;" />
+      <button type="submit" class="btn">Upload & Annotate</button>
+      <a id="downloadOutput" href="#" style="display:none; margin-left:16px;">Download output file</a>
+    </form>
+  </section>
 
   <!-- Tabs toolbar -->
   <div class="tabs toolbar card">
@@ -380,85 +376,13 @@ async function autoGenerateTTSFromNY() {
 document.getElementById("generateApiTTS").addEventListener("click", autoGenerateTTSFromNY);
 
 
-
-
-document.getElementById("editBtn").addEventListener("click", () => {
-  // Choose which editor to focus; keep your existing logic if you like
-  const isFinal = document.getElementById("finalTextTab").style.display === "block";
-  const targetId = isFinal ? "finalText" : "fullText";
-  const div = document.getElementById(targetId);
-  if (div) div.focus();
-});
-
-
-
-
-
-
-
-
-  const selectedFiles = [];  // array of File objects
-
-function renderSelectedList() {
-  const ul = document.getElementById("selectedList");
-  ul.innerHTML = "";
-  selectedFiles.forEach((f, i) => {
-    const li = document.createElement("li");
-    li.style.margin = "4px 0";
-    li.textContent = `${f.name} (${(f.size/1024).toFixed(1)} KB)`;
-    ul.appendChild(li);
-  });
-
-  // Legacy "single file" label support (optional)
-  const fileEl = document.querySelector("#dropZone .dz-file");
-  const labelEl = document.querySelector("#dropZone .dz-label");
-  if (selectedFiles.length) {
-    if (fileEl) { fileEl.style.display = "block"; fileEl.textContent = `${selectedFiles.length} file(s) ready`; }
-    if (labelEl) labelEl.textContent = "Ready:";
-  } else {
-    if (fileEl) { fileEl.style.display = "none"; fileEl.textContent = ""; }
-    if (labelEl) labelEl.textContent = "Drop PDFs here or click to choose";
-  }
-}
-
-function addFiles(list) {
-  const pdfs = Array.from(list).filter(f =>
-    f.type === "application/pdf" || f.name.toLowerCase().endsWith(".pdf")
-  );
-  // Prevent exact duplicates (same name+size)
-  const key = f => `${f.name}|${f.size}`;
-  const existing = new Set(selectedFiles.map(key));
-  pdfs.forEach(f => {
-    if (!existing.has(key(f))) selectedFiles.push(f);
-  });
-  renderSelectedList();
-}
-
-// --- Wire up form ---
-document.getElementById("addAnother").addEventListener("click", () => {
-  document.getElementById("pdfUpload").click();
-});
-
-document.getElementById("pdfUpload").addEventListener("change", (e) => {
-  if (e.target.files?.length) addFiles(e.target.files);
-  // Allow picking the same file again later
-  e.target.value = "";
-});
-
 document.getElementById("uploadForm").addEventListener("submit", async (e) => {
   e.preventDefault();
+  const input = e.target.querySelector('input[name="pdf"]');
+  if (!input.files.length) return alert("Please choose a PDF first.");
 
-  const input = document.getElementById("pdfUpload");
   const fd = new FormData();
-
-  if (selectedFiles.length) {
-    selectedFiles.forEach(f => fd.append("pdfs", f));
-  } else if (input.files.length) {
-    // fallback if user didn't use the basket
-    Array.from(input.files).forEach(f => fd.append("pdfs", f));
-  } else {
-    return alert("Please choose at least one PDF.");
-  }
+  fd.append("pdf", input.files[0]);
 
   try {
     const res    = await fetch("/upload", { method: "POST", body: fd });
@@ -467,34 +391,53 @@ document.getElementById("uploadForm").addEventListener("submit", async (e) => {
     const outputText = await fetch(result.download_url).then(r => r.text());
     document.getElementById("outputText").textContent = outputText;
 
-    document.getElementById("fullText").innerText    = result.pdf_text;
-    document.getElementById("finalText").innerText   = result.final_pdf_text;
+    document.getElementById("fullText").innerText  = result.pdf_text;
+    document.getElementById("finalText").innerText = result.final_pdf_text;
     document.getElementById("nyFinalText").innerText = result.ny_final_pdf_text;
 
-    const dl = document.getElementById("downloadOutput");
-    dl.href = result.download_url;
-    dl.download = "unfamiliar_words_combined.txt";
-    dl.style.display = "inline";
-
-    const editBtn = document.getElementById("editBtn");
-    if (editBtn) editBtn.style.display = "inline";
+    document.getElementById("downloadOutput").href        = result.download_url;
+    document.getElementById("downloadOutput").download    = input.files[0].name.replace(/\.pdf$/i, ".txt");
+    document.getElementById("downloadOutput").style.display = "inline";
+const editBtn = document.getElementById("editBtn");
+if (editBtn) editBtn.style.display = "inline";
   } catch (err) {
     console.error(err);
-    alert("Failed to process PDFs.");
+    alert("Failed to process PDF.");
   }
 });
 
-// --- Drag & drop wiring (multi-file) ---
+
+document.getElementById("editBtn").addEventListener("click", () => {
+  // Choose which editor to focus; keep your existing logic if you like
+  const isFinal = document.getElementById("finalTextTab").style.display === "block";
+  const targetId = isFinal ? "finalText" : "fullText";
+  const div = document.getElementById(targetId);
+  if (div) div.focus();
+});
+
+
+
+
+
+
+
+// Drag & drop wiring
 (() => {
   const form      = document.getElementById("uploadForm");
+  const fileInput = form.querySelector('input[name="pdf"]');
   const dropZone  = document.getElementById("dropZone");
+  const labelEl   = dropZone.querySelector(".dz-label");
+  const fileEl    = dropZone.querySelector(".dz-file");
+
+  // Let clicking the dropzone open the file picker
+  dropZone.addEventListener("click", () => fileInput.click());
 
+  // Prevent the browser from opening the file on drop
   ["dragenter","dragover","dragleave","drop"].forEach(evt =>
     document.addEventListener(evt, e => { e.preventDefault(); e.stopPropagation(); })
   );
 
-  dropZone.addEventListener("click", () => document.getElementById("pdfUpload").click());
-
+  // Visual highlight
   ["dragenter","dragover"].forEach(evt =>
     dropZone.addEventListener(evt, () => dropZone.classList.add("is-dragover"))
   );
@@ -502,10 +445,44 @@ document.getElementById("uploadForm").addEventListener("submit", async (e) => {
     dropZone.addEventListener(evt, () => dropZone.classList.remove("is-dragover"))
   );
 
+  // Handle the actual drop
   dropZone.addEventListener("drop", (e) => {
     const files = e.dataTransfer?.files;
     if (!files || !files.length) return;
-    addFiles(files);
+
+    const file = files[0];
+    const isPDF = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
+    if (!isPDF) {
+      alert("Please drop a PDF file.");
+      return;
+    }
+
+    // Assign to the real <input type="file">
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    fileInput.files = dt.files;
+
+    // UI feedback
+    labelEl.textContent = "Ready:";
+    fileEl.style.display = "block";
+    fileEl.textContent = file.name;
+
+    // Optional: auto-submit after drop (uncomment to enable)
+    // form.requestSubmit();
+  });
+
+  // Also reflect selection when user picks via dialog
+  fileInput.addEventListener("change", () => {
+    const file = fileInput.files?.[0];
+    if (!file) {
+      labelEl.textContent = "Drop PDF here or click to choose";
+      fileEl.style.display = "none";
+      fileEl.textContent = "";
+      return;
+    }
+    labelEl.textContent = "Ready:";
+    fileEl.style.display = "block";
+    fileEl.textContent = file.name;
   });
 })();
 </script>