comment.md

<script setup>
// these are imports for the two libraries you need: mupdf, and tauri's filesystem plugin
import * as mupdf from "../../node_modules/mupdf/dist/mupdf.js";
import { readDir, BaseDirectory } from "@tauri-apps/plugin-fs";

// This is the function that fires when you put something into the <input/> element down there, it gets fed the `event.target.files` argument fed by the element and you accept it as the "file" variable in the function scope.
window.openFile = async function openFile(file) {
  console.log("OPEN DOCUMENT", file.name);
  console.log(file);
  
  // unnecessary reassignment but it makes it clear you expect a folder here. Why you're capitalising this I don't know.
  let Folder = file;
  
  console.log(Folder);

  // this is you iterating through the folder contents and run the `please()` function you made. It will go through everything, but you seem to expect every item to be a file? the loop will probably stop if it encounters a folder, just keep that in mind.

  for (let item of file) {
    console.log(item);
    // you don't seem to be running this in async lol so this is running synchronously. if you wanted to do this async, you could run it with `await` but since you're not expecting it to return I don't think you have to worry too much about this
    please(item);
  }

  async function please(file) {
    // mupdf ingesting the file and giving you a mupdf Document object you can interface with
    let pdf = mupdf.Document.openDocument(await file.arrayBuffer(), file.name);
    // loading the one page (I thought this was zero-indexed? correct me if i'm wrong)
    const page = pdf.loadPage(1);
    console.log(page);
    // getting the text content
    let translated = page.toStructuredText("preserve-whitespace").asJSON();
    console.log(`${translated}`);
    // then you parse the JSON object into a JSON object? not sure if this is necessary but if they're giving you a string that seems like bad form. Doesn't hurt much, anyway
    let objectpls = JSON.parse(translated);
    console.log(objectpls);
    // what? why are you using timers?
    // Fire off page renders on a timer to avoid blocking the browser.

  }
};
</script>

<template>
  <input
    type="file"
    accept=".pdf,.xps,application/pdf"
    webkitdirectory
    onchange="openFile(event.target.files)"
  />
  <div id="pageRoot"></div>
</template>