4

I integrated the file uploader from the base UI and tried to display the uploaded file using react-pdf package. I tried converting the file as Blob and then uploaded it with the below code

const test = new Blob([file], { type: "application/pdf" });
    const fileURL = URL.createObjectURL(test);

Instead, I tried directly assigning the uploaded file to the Document tag but getting that file prop is accepting string instead received file type.

I tried using the file reader also but was unable to achieve it

Below is my code sandbox link:- https://codesandbox.io/s/base-web-file-uploader-basic-usage-forked-z8zpkr?file=/src/example.js:1712-1820

can anyone please help me in getting this issue resolved

And one more thing which i noticed is in the onLoadError prop was getting the below err

Error: Setting up fake worker failed: "Cannot read properties of undefined (reading 'WorkerMessageHandler'
Abhinav Veramosu
  • 43
  • 1
  • 4
  • 1
    You have to add cdn for the worker... it would help u... https://stackoverflow.com/questions/65955980/react-pdf-js-warning-setting-up-fake-worker this issue was also closed on github.. https://github.com/wojtekmaj/react-pdf/issues/321 – sms Aug 12 '22 at 12:40
  • I added the cdn now i am getting a different error at BaseExceptionClosure (https://hg4tyy.csb.app/node_modules/pdfjs-dist/legacy/build/pdf.js:1937:29) at Object.eval (https://hg4tyy.csb.app/node_modules/pdfjs-dist/legacy/build/pdf.js:1940:2) at __w_pdfjs_require__ (https://hg4tyy.csb.app/node_modules/pdfjs-dist/legacy/build/pdf.js:27761:42) I updated the sandbox also https://codesandbox.io/s/base-web-file-uploader-basic-usage-forked-z8zpkr?file=/src/example.js – Abhinav Veramosu Aug 12 '22 at 12:58
  • 1
    Got the issure resolved . Sandbox link:-https://codesandbox.io/s/base-web-file-uploader-basic-usage-forked-lxsi01 – Abhinav Veramosu Aug 17 '22 at 05:33

2 Answers2

1

import the library from an alternetive folder, and add pdf worker using cdn:

import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;

works for me

Diego Aliendre
  • 26
  • 3
0

What worked for me was:

  1. Copy node_modules/pdfjs-dist/build/pdf.worker.js to public/pdf.worker.js
  2. options={{workerSrc: "pdf.worker.js"}} Add this props inside the Document component from react-pdf
letie
  • 704
  • 2
  • 10
  • 20