I am building a react project where a user needs to be able to preview a document that has been uploaded. I have the file stored in a blob file in a variable called 'upload', and I use the following code to display it in a new tab when the user clicks on the preview button:
var newWIndow;
if (upload.includes("data:application/pdf"))
newWIndow = "<iframe width='100%' height='100%' src='" + upload + "'></iframe>"
else
newWIndow = "<img width='100%' src='" + upload + "'></img>";
var x = window.open();
x.document.open();
x.document.write(newWIndow);
x.document.close();
The uploads are limited to image or pdf files, and works great, except when the file size goes over 1MB. In that case, it simply opens a blank page:
THe entire blob file is too large to post here, but I thought that giving an idea of what it looks like might help someone spot what I am doing wrong, so here is a snippet:
data:application/pdf;base64,JVBERi0xLjQNJeLjz9MNCjEgMCBvYmoNPDwvTWV0YWRhdGEgMiAwIFIvUGFnZXMgMyAwIFI
Does anyone perhaps have any advice for me? Is there a better way to open the uploaded document? Is there a way to get around the size issue? Any advice would be greatly appreciated.