display saved pdf in mongoDB on react

[sinamhbb]

Hello there,

I am developing a small service that tracks your job applications.
first, you create a job application and choose a PDF file from your local system.
As soon as you submit the application, react will send a POST request to the server-side on Node.js and save the data in MongoDB as follow:

Now for showing back the PDF react request the same files from the server using API and it will become like this:

The code for showing the file is as follow:
I have commented my attempts(to encode binary to base64) so I could try both ways at the same time:

import React, { useState } from "react";
import { Document, Page, pdfjs } from "react-pdf";

const ListItems = ({ items }) => {
  // attempt A =>
  var binary = items[0].cover.data;
  let base64Data = btoa(binary);

  // attempt 2 =>
  // let buff = new Buffer(items[0].cover.data);
  // let base64data = buff.toString("base64");

  // console.log(enc);
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }
  return (
    <>
      <div className="container">
        <Document
          file={`data:application/pdf;base64,${base64Data}`}
          onLoadSuccess={onDocumentLoadSuccess}
        ></Document>
      </div>
    </>
  );
};

in both ways, I get this: Failed to load PDF file.

Also in console it shows like this:

Please advise me on how to make this work.

[wojtekmaj]

This belongs to Stack Overflow, not GitHub Issues. There's no React-PDF issue here.

Regarding the console, both errors were already discussed in other issues e.g. #97.