From bdf356c84cf03e019de3f462c88f837f24ff224b Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Thu, 7 Mar 2024 17:05:19 -0500
Subject: [PATCH] Combined drop zone, refs #16

---
 .../templates/_extract_drop_handler.html      | 143 ++++++++++++++++++
 .../templates/_extract_heic.html              |  36 -----
 .../templates/_extract_pdf_drop.html          |  75 ---------
 .../templates/extract_create_table.html       |   9 +-
 .../templates/extract_to_table.html           |   9 +-
 5 files changed, 152 insertions(+), 120 deletions(-)
 create mode 100644 datasette_extract/templates/_extract_drop_handler.html
 delete mode 100644 datasette_extract/templates/_extract_heic.html
 delete mode 100644 datasette_extract/templates/_extract_pdf_drop.html

diff --git a/datasette_extract/templates/_extract_drop_handler.html b/datasette_extract/templates/_extract_drop_handler.html
new file mode 100644
index 0000000..e9f2afc
--- /dev/null
+++ b/datasette_extract/templates/_extract_drop_handler.html
@@ -0,0 +1,143 @@
+<script type="module">
+const textarea = document.getElementById("id_content");
+const imageInput = document.getElementById("id_image");
+const processingMessage = document.getElementById("processing_message");
+
+async function extractText(pdf) {
+  const pdfjs = (
+    await import("/-/static-plugins/datasette_extract/pdfjs-dist-4-0-379.js")
+  ).default;
+  pdfjsLib.GlobalWorkerOptions.workerSrc =
+    "/-/static-plugins/datasette_extract/pdf.worker.mjs";
+
+  const loadingTask = pdfjsLib.getDocument(pdf);
+  const pdfDocument = await loadingTask.promise;
+
+  const numPages = pdfDocument.numPages;
+  let pageTextPromises = [];
+
+  for (let i = 1; i <= numPages; i++) {
+    pageTextPromises.push(
+      pdfDocument.getPage(i).then((page) => page.getTextContent()),
+    );
+  }
+
+  const pageTexts = await Promise.all(pageTextPromises);
+  return pageTexts
+    .map((item) => item.items.map((text) => text.str).join(" "))
+    .join("\n\n");
+}
+
+async function convertHeicToJpeg(file) {
+  const heic2any = (
+    await import("/-/static-plugins/datasette_extract/heic2any-0.0.4.min.js")
+  ).default;
+  try {
+    const blob = await heic2any({
+      blob: file,
+      toType: "image/jpeg",
+      quality: 0.8,
+    });
+    return new File([blob], `converted-${file.name}.jpeg`, {
+      type: "image/jpeg",
+    });
+  } catch (error) {
+    console.error("Conversion error:", error);
+    return null;
+  }
+}
+
+function dragOverHandler(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  textarea.classList.add("drag-over");
+}
+
+function dragLeaveHandler(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  textarea.classList.remove("drag-over");
+}
+
+async function dropHandler(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  textarea.classList.remove("drag-over");
+
+  const files = Array.from(event.dataTransfer.files);
+  const imageFiles = files.filter((file) => file.type.startsWith("image/"));
+  const pdfFiles = files.filter((file) => file.type === "application/pdf");
+  const otherFiles = files.filter(
+    (file) =>
+      !file.type.startsWith("image/") && file.type !== "application/pdf",
+  );
+
+  if (imageFiles.length > 0) {
+    processingMessage.style.display = "block";
+    const convertedImages = await Promise.all(
+      imageFiles.map(async (file) => {
+        if (file.type === "image/heic") {
+          return await convertHeicToJpeg(file);
+        }
+        return file;
+      }),
+    );
+    const validImages = convertedImages.filter((file) => file !== null);
+    if (validImages.length > 0) {
+      const dataTransfer = new DataTransfer();
+      validImages.forEach((file) => dataTransfer.items.add(file));
+      imageInput.files = dataTransfer.files;
+    }
+    processingMessage.style.display = "none";
+  }
+
+  if (pdfFiles.length > 0) {
+    processingMessage.style.display = "block";
+    const pdfTexts = await Promise.all(
+      pdfFiles.map(async (file) =>
+        extractText(new Uint8Array(await file.arrayBuffer())),
+      ),
+    );
+    textarea.value = pdfTexts.join("\n\n");
+    processingMessage.style.display = "none";
+  }
+
+  if (otherFiles.length > 0) {
+    const otherContents = await Promise.all(
+      otherFiles.map(
+        (file) =>
+          new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              resolve(e.target.result);
+            };
+            reader.onerror = (e) => {
+              reject(new Error("Failed to read file"));
+            };
+            reader.readAsText(file);
+          }),
+      ),
+    );
+    textarea.value +=
+      (textarea.value ? "\n\n" : "") + otherContents.join("\n\n");
+  }
+}
+
+imageInput.addEventListener("change", async (event) => {
+  const file = event.target.files[0];
+  if (file && file.type === "image/heic") {
+    processingMessage.style.display = "block";
+    const convertedFile = await convertHeicToJpeg(file);
+    if (convertedFile) {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(convertedFile);
+      imageInput.files = dataTransfer.files;
+    }
+    processingMessage.style.display = "none";
+  }
+});
+
+textarea.addEventListener("dragover", dragOverHandler);
+textarea.addEventListener("dragleave", dragLeaveHandler);
+textarea.addEventListener("drop", dropHandler);
+</script>
\ No newline at end of file
diff --git a/datasette_extract/templates/_extract_heic.html b/datasette_extract/templates/_extract_heic.html
deleted file mode 100644
index db427d2..0000000
--- a/datasette_extract/templates/_extract_heic.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<details>
-  <summary>Use this section to handle Apple HEIC images</summary>
-  <p style="padding-top: 0.5em">
-  <label style="font-weight: bold; padding-right: 1em;">HEIC image file
-    <input type="file" id="heicInput" accept=".heic" style="font-sive: 10em">
-  </label>
-  </p>
-  <img id="jpegOutput" alt="Converted JPEG" style="max-width: 100%; display: none;">
-</details>
-
-<script type="module">
-const heicInput = document.getElementById("heicInput");
-const jpegOutput = document.getElementById("jpegOutput");
-
-heicInput.addEventListener("change", async (event) => {
-    const heic2any = (await import('{{ urls.static_plugins("datasette_extract", "heic2any-0.0.4.min.js") }}')).default;
-    const file = event.target.files[0];
-    if (file) {
-        try {
-            const blob = await heic2any({
-                blob: file,
-                toType: "image/jpeg",
-                quality: 0.8
-            });
-            jpegOutput.src = URL.createObjectURL(blob);
-            jpegOutput.style.display = "block";
-            const jpegFile = new File([blob], "converted-from-heic.jpeg", { type: "image/jpeg" });
-            const dataTransfer = new DataTransfer();
-            dataTransfer.items.add(jpegFile);
-            document.querySelector('#id_image').files = dataTransfer.files;
-        } catch (error) {
-            console.error("Conversion error:", error);
-        }
-    }
-});
-</script>
diff --git a/datasette_extract/templates/_extract_pdf_drop.html b/datasette_extract/templates/_extract_pdf_drop.html
deleted file mode 100644
index bb755a2..0000000
--- a/datasette_extract/templates/_extract_pdf_drop.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<script type="module">
-async function extractText(pdf) {
-  const pdfjs = (await import('{{ urls.static_plugins("datasette_extract", "pdfjs-dist-4-0-379.js") }}')).default;
-  pdfjsLib.GlobalWorkerOptions.workerSrc = '{{ urls.static_plugins("datasette_extract", "pdf.worker.mjs") }}';
-
-  const loadingTask = pdfjsLib.getDocument(pdf);
-  const pdfDocument = await loadingTask.promise;
-
-  const numPages = pdfDocument.numPages;
-  let pageTextPromises = [];
-
-  for (let i = 1; i <= numPages; i++) {
-    pageTextPromises.push(
-      pdfDocument.getPage(i).then((page) => page.getTextContent())
-    );
-  }
-
-  const pageTexts = await Promise.all(pageTextPromises);
-  return pageTexts
-    .map((item) => item.items.map((text) => text.str).join(" "))
-    .join("\n\n");
-}
-
-const textarea = document.getElementById('id_content');
-
-function dragOverHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    textarea.classList.add('drag-over');
-}
-function dragLeaveHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    textarea.classList.remove('drag-over');
-}
-async function dropHandler(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    textarea.classList.remove('drag-over');
-    console.log(event.dataTransfer.files);
-    const includeFilenames = event.dataTransfer.files.length > 1;
-
-    var promises = Array.from(event.dataTransfer.files).map(file => {
-      return new Promise(async (resolve, reject) => {
-        let contentToAdd = '';
-        if (includeFilenames) {
-          contentToAdd += file.name + '\n\n';
-        }
-        if (file.type == 'application/pdf') {
-          const pdfContent = await extractText(new Uint8Array(await file.arrayBuffer()));
-          contentToAdd += pdfContent;
-          resolve(contentToAdd);
-        } else {
-          // Try to read the file as text
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            contentToAdd += e.target.result;
-            resolve(contentToAdd);
-          };
-          reader.onerror = (e) => {
-            reject(new Error('Failed to read file'));
-          };
-          reader.readAsText(file);
-        }
-      });
-    });
-    Promise.all(promises).then(contents => {
-      textarea.value = contents.join('\n\n');
-    });
-}
-
-textarea.addEventListener('dragover', dragOverHandler);
-textarea.addEventListener('dragleave', dragLeaveHandler);
-textarea.addEventListener('drop', dropHandler);
-</script>
diff --git a/datasette_extract/templates/extract_create_table.html b/datasette_extract/templates/extract_create_table.html
index 46e8c17..501b82e 100644
--- a/datasette_extract/templates/extract_create_table.html
+++ b/datasette_extract/templates/extract_create_table.html
@@ -33,14 +33,15 @@ <h1>Extract data and create a new table in {{ database }}</h1>
   <p>
     <textarea name="content" id="id_content" style="width: 100%; height: 20em;" placeholder="Paste content here"></textarea>
   </p>
-  <p><label>Or upload an image: <input type="file" id="id_image" name="image"></label></p>
+  <p id="processing_message" style="display: none;">Processing...</p>
+  <p>
+    <label>Or upload an image: <input type="file" id="id_image" name="image"></label>
+  </p>
   <p>
     <input type="submit" value="Extract">
   </p>
 </form>
 
-{% include "_extract_heic.html" %}
-
-{% include "_extract_pdf_drop.html" %}
+{% include "_extract_drop_handler.html" %}
 
 {% endblock %}
\ No newline at end of file
diff --git a/datasette_extract/templates/extract_to_table.html b/datasette_extract/templates/extract_to_table.html
index c44177d..220e082 100644
--- a/datasette_extract/templates/extract_to_table.html
+++ b/datasette_extract/templates/extract_to_table.html
@@ -40,15 +40,14 @@ <h1>Extract data into {{ database }} / {{ table }}</h1>
   <p>
     <textarea name="content" id="id_content" style="width: 100%; height: 20em;" placeholder="Paste content here"></textarea>
   </p>
-  <p><label>Or upload an image: <input type="file" id="id_image" name="image"></label></p>
+  <p id="processing_message" style="display: none;">Processing...</p>
   <p>
-    <input type="submit" value="Extract">
+    <label>Or upload an image: <input type="file" id="id_image" name="image"></label>
   </p>
+  <p><input type="submit" value="Extract"></p>
 </form>
 
-{% include "_extract_heic.html" %}
-
-{% include "_extract_pdf_drop.html" %}
+{% include "_extract_drop_handler.html" %}
 
 {% if previous_runs %}
 <h2>Previous extraction tasks</h2>