How can I cache the uploaded file of the user in my website, without any database

Question

I'm making a pdf reader website using the pdfjs library, and I wanted to make something similar to this website https://pdfviewer.softgateon.net/ which also uses pdfjs, though it's too old, but a nice thing about that website is that when I upload my pdf file, and after I'm done reading it, I close my browser and then tomorrow when I open that website, the pdf is already there at the last page that I was reading, I wanted to make the same capability for my website, but I have no idea how it's done, my website is only made by javascript, and I uploaded it on github pages, https://smh6.github.io/PDFWIZ/

And how it works is that, you upload your file and then, I remove the home page HTML and then I add the HTML of the reading mode page, can I get that feature in my website too? it doesn't have any backend, it's pure javascript

Is it related to the host that I'm using or it can be done with javascript?

you could use a clientside db, see https://www.npmjs.com/package/localforage — Lawrence Cherone, Dec 05 '21 at 15:11
@LawrenceCherone Thanks, I'll check it out, by the way, the website that I mentioned https://pdfviewer.softgateon.net/ I uploaded a pdf in it, and then I closed my browser, moved that file to another directory, and then when I opened the browser again, it threw an unexpected error on the page, how does that work? it might not be using a database at all right? because it broke when I moved the file, I'm just curious about how is that website doing this, do you have any idea? — bzmind, Dec 05 '21 at 15:41
not sure how they do it, my suggestion is that when you add a pdf its stored in the browser (IndexedDB, WebSQL), then onload you pull it back out. You cant reference a previous file input as js code can't pull something of a users computer as its a security risk, so you need to store the blob — Lawrence Cherone, Dec 05 '21 at 16:50

score 1 · Accepted Answer · answered Dec 05 '21 at 17:48

As said in comment, upon adding the PDF, store it in a clientside database, (like localforage), which will persistently store the PDF as a blob in storage, which then on next visit you can load it back then render it again.

Online Example: https://localforage-pdf.glitch.me

Fundamental Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"
      integrity="sha512-+BMamP0e7wn39JGL8nKAZ3yAQT2dL5oaXWr4ZYlTGkKOaoXM/Yj7c4oy50Ngz5yoUutAG17flueD4F6QpTlPng=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body>
    <div id="pdf"></div>

    <input type="file" onchange="loadPDF(this)" accept="application/pdf" />

    <button id="clearPDF">
      Remove PDF
    </button>

    <script>
      // clear and initial display
      document.getElementById("clearPDF").onclick = function() {
        localforage.removeItem("lastPDF");
        document.getElementById("pdf").style.display = "none";
      };
      document.getElementById("pdf").style.display = "none";

      // render the pdf object, if you use a diff lib implement it here
      const renderPDF = function(src) {
        const resource = (window.URL || window.webkitURL).createObjectURL(
          new Blob([src], { type: "application/pdf" })
        );

        const object = document.createElement("object");
        object.setAttribute("data", resource);
        object.setAttribute("type", "application/pdf");
        object.setAttribute("width", "500");
        object.setAttribute("height", "678");

        const iframe = document.createElement("iframe");
        iframe.setAttribute("src", resource);
        iframe.setAttribute("width", "500");
        iframe.setAttribute("height", "678");
        iframe.innerHTML = "<p>This browser does not support PDF!</p>";

        object.append(iframe);

        document.getElementById("pdf").replaceChildren(object);

        // show it
        document.getElementById("pdf").style.display = "block";
      };

      // load the PDF from file input, render then store in storage
      const loadPDF = elm => {
        const fr = new FileReader();
        fr.onload = () => {
          // render
          renderPDF(fr.result);

          // store
          localforage.setItem("lastPDF", fr.result);
        };
        fr.readAsArrayBuffer(elm.files[0]);
      };

      // load and render last stored pdf
      localforage.getItem("lastPDF", (err, value) => {
        if (err || !value) return;
        renderPDF(value);
      });
    </script>
  </body>
</html>

Thanks for the answer, but unfortunately, I think I can't use localForage, because its maximum capacity is 5MB, but most of the pdfs that I read are more than that size, I'm so eager to know how the website that I mentioned does this :(( I've even uploaded pdfs with 40MB size, but it would remember it when I restarted the browser, it's not even size dependent — bzmind, Dec 06 '21 at 07:07
the max is much higher then that, like 2GB, see https://stackoverflow.com/questions/5692820/maximum-item-size-in-indexeddb — Lawrence Cherone, Dec 06 '21 at 15:24
But it's talking about indexDB, sorry I'm a noob in web dev, is the localForage the same as indexDB? — bzmind, Dec 06 '21 at 15:31
yes, it's a helper lib, it also supports websql and localstorage or [custom](https://localforage.github.io/localForage/#driver-api-definedriver) (which you can do a crud on backend with ajax), I've linked to its docs multiple times, should read them ;). If you want to store above the browser limits then you have to store the file serverside — Lawrence Cherone, Dec 06 '21 at 15:43

score 0 · Answer 2 · answered Dec 05 '21 at 15:52

0

You can use a cookie to save it.

Here should put what you use to open the file (path, param or whatever)

var lastFile = document.cookie = "lastFile=file"

Then every time the page is loaded, just check if that cookie exists, if so, open the file.

if(lastFile){
     // open file
}

answered Dec 05 '21 at 15:52

Leonardo Bagi

156
3

this won't work, if it could then some evil site could download files from your device. unless you're suggesting that you store the pdf files content in the cookie which also wouldn't work due to only be able to store 4kb – Lawrence Cherone Dec 05 '21 at 16:57
then using localStorage should be better – Leonardo Bagi Jan 27 '22 at 01:18

How can I cache the uploaded file of the user in my website, without any database

2 Answers2