0

I have a MERN site where the user can upload files like docx, pdf, and then they are uploaded to mongoDB using gridfs. I want the user to be able to select a file they have previously uploaded and view it in the browser (embedded). I have it to the point where I have the dataURL for the file, but I cannot get it to display.

Here is an example dataURL I've generated for a file the user selected:

data:text/xml;base64,UEsDBBQACAgIAC+LZ1IAAAAAAAAAAAAAAAASAAAAd29yZC9udW1iZXJpbmcu
eG1srVbbjpswEP2C/gNC6mPCJYRQtGQfutqq1apabbcf4Bg....

And this code goes on for a long time.

Here is what I'm using to display it ( {data} is just the variable I am using for the dataURL as seen above):

<object
    data={data}
    type='text/xml'
    title='essay-view'
    id='essay-view'             
 ></object>

This is what is showing up on the page where the <object> should be:

enter image description here

It is a encoding or decoding issue? I've tried overriding the mimetype in the dataURL, but no luck. I'd like this to display the file, no matter if it's a pdf or docx, but formatting isn't super important.

AEM
  • 1,354
  • 8
  • 20
  • 30
mgvoz
  • 3
  • 3
  • Browsers can natively display PDFs, but docx is a proprietary format; browsers can't embed those kind of files – Hamms Apr 30 '21 at 19:05
  • That's understandable. However, this is not working with the pdf files either. – mgvoz Apr 30 '21 at 19:11
  • I believe you'll need `type="application/pdf"`; see [this question and answer](https://stackoverflow.com/a/43241430/1810460) – Hamms Apr 30 '21 at 19:23
  • Unfortunately, when I change it, it just creates a button to download the file, rather than displaying it. – mgvoz Apr 30 '21 at 19:41

0 Answers0