feature: examples + drag and drop fle functionality

Author: skeptrunedev

pdf2md/server/src/templates/demo-ui.html

@@ -112,6 +112,7 @@
       </div>
     </div>
     <div
+      id="drop-zone"
       class="mt-4 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
     >
       <div class="text-center">
@@ -147,6 +148,35 @@
         <p class="text-xs/5 text-gray-600">PDF</p>
       </div>
     </div>
+    <div
+      id="example-buttons-container"
+      class="flex flex-wrap gap-2 mt-2 w-full justify-center items-center"
+    >
+      <button class="hover:border-magenta-500 border">
+        <img
+          src="https://cdn.trieve.ai/pdf2md/satellite-market-data-statista.webp"
+          class="w-28"
+        />
+      </button>
+      <button class="hover:border-magenta-500 border">
+        <img
+          src="https://cdn.trieve.ai/pdf2md/bitcoin-whitepaper-diagram.webp"
+          class="w-28"
+        />
+      </button>
+      <button class="hover:border-magenta-500 border">
+        <img
+          src="https://cdn.trieve.ai/pdf2md/clutch-install-guide-sscycle.webp"
+          class="w-28"
+        />
+      </button>
+      <button class="hover:border-magenta-500 border">
+        <img
+          src="https://cdn.trieve.ai/pdf2md/xerox-ui-patent-pg15.webp"
+          class="w-28"
+        />
+      </button>
+    </div>
   </form>
 </div>
 <div class="px-4 mt-10 sm:mt-14 md:mt-24 max-w-screen-2xl mx-auto">

pdf2md/server/static/output.css

@@ -698,6 +698,10 @@ video {
   width: 3rem;
 }
 
+.w-28 {
+  width: 7rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1172,6 +1176,11 @@ video {
   --tw-ring-offset-width: 2px;
 }
 
+.hover\:border-magenta-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(163 62 181 / var(--tw-border-opacity));
+}
+
 .hover\:bg-magenta-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(163 62 181 / var(--tw-bg-opacity));

pdf2md/server/static/pdf2md.js

@@ -254,6 +254,70 @@ copyButton.addEventListener("click", (e) => {
 });
 
 const fileUploadInput = document.getElementById("file-upload");
+const exampleButtonsContainer = document.getElementById(
+  "example-buttons-container"
+);
+exampleButtonsContainer.querySelectorAll("button").forEach((button) => {
+  button.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const imgSrc = button.querySelector("img").getAttribute("src");
+    const pdfSrc = imgSrc.replace(".webp", ".pdf");
+    fetch(pdfSrc).then((response) => {
+      response.blob().then((blob) => {
+        const file = new File([blob], pdfSrc.split("/").pop(), {
+          type: "application/pdf",
+        });
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(file);
+        fileUploadInput.files = dataTransfer.files;
+
+        const event = new Event("change", { bubbles: true });
+        fileUploadInput.dispatchEvent(event);
+      });
+    });
+  });
+});
+
+const dropZone = document.getElementById("drop-zone");
+const fileInput = document.getElementById("file-upload");
+dropZone.addEventListener("dragover", (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  dropZone.style.borderColor = "#a33eb5";
+});
+
+dropZone.addEventListener("dragleave", (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  dropZone.style.borderColor = "rgba(17, 24, 39, 0.25)";
+});
+
+dropZone.addEventListener("drop", handleDrop);
+
+function handleDrop(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  dropZone.style.borderColor = "rgba(17, 24, 39, 0.25)";
+
+  const dt = e.dataTransfer;
+  const files = dt.files;
+
+  if (files.length) {
+    const file = files[0];
+
+    if (file.type === "application/pdf") {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+      fileInput.files = dataTransfer.files;
+
+      const event = new Event("change", { bubbles: true });
+      fileInput.dispatchEvent(event);
+    } else {
+      alert("Please upload a PDF file.");
+    }
+  }
+}
 
 fileUploadInput.addEventListener("change", (event) => {
   const file = event.target.files[0];