How to display a user-uploaded PDF in React using FilePicker from 'react-file-picker'?

Question

My goal is to allow the user to upload a pdf from their file explorer, and upon clicking a button that says 'view', they'll be able to see that PDF file.

I'm currently using react-file-picker to upload files, but that doesn't seem to work.

I know someone is going to comment, "Look it up", or something like that, but I have. All the examples that I've seen so far are only tailored to PDFs that can be found at various online URLs. I'm obviously not using URLs, but instead actual pdfs from the users file explorer.

Currently I have a method for displaying the actual button to use when uploading files, and there's a method attached to it that handles the file after it's uploaded. I need help with the handleFileChange method below so that I can show the pdf. If 'FilePicker' isn't a good option, can anyone provide me with suggestions on good React tools that will help me achieve this?

Thanks for your help!

My code for uploading a file:

Answer 1

Check out the documentation for pdf-viewer-reactjs. It will do what you need and looks to be simple to implement.