How can I preview the PDF file before upload? [duplicate] - reactjs

Question

This question already has answers here:
how to open a local PDF in PDFJS using file input?
(3 answers)
Closed 3 years ago.
Convert the upload data to base64 and I want to preview it before sending.
Image data convert to base64 and shown in the <img> tag.
Similarly, text file also has done.
But now getting stuff in PDF preview.
Expecting that when I upload, PDF should be a preview.
<div className="text-center">
{this.state.files.map((file, i) => {
if (
file.Image_extension == "html" ||
file.Image_extension == "png" ||
file.Image_extension == "PNG" ||
file.Image_extension == "JPG" ||
file.Image_extension == "jpg"
) {
return <img key={i} src={file.type} />;
console.log(file.type);
} else if (file.Image_extension == "txt" || file.Image_extension == "TXT") {
// alert(file.type)
console.log(<textarea key={i} value={file.type}></textarea>);
return <textarea id="text" key={i} value={file.type}></textarea>;
} else {
return <PDF file={file.type} scale={1.3} pages={Infinity} />;
}
})}
</div>;

Answer 1

You may use mozilla pdf.js. You can check it out here
document.querySelector("#pdf-upload").addEventListener("change", function(e) {
var canvasElement = document.querySelector("canvas")
var file = e.target.files[0]
if (file.type != "application/pdf") {
console.error(file.name, "is not a pdf file.")
return
}
var fileReader = new FileReader();
fileReader.onload = function() {
var typedarray = new Uint8Array(this.result);
PDFJS.getDocument(typedarray).then(function(pdf) {
// you can now use *pdf* here
console.log("the pdf has ", pdf.numPages, "page(s).")
pdf.getPage(pdf.numPages).then(function(page) {
// you can now use *page* here
var viewport = page.getViewport(2.0);
var canvas = document.querySelector("canvas")
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: canvas.getContext('2d'),
viewport: viewport
});
});
});
};
fileReader.readAsArrayBuffer(file);
})
body {
background: rgb(204, 204, 204);
}
.page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
.page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
.page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
.page[size="A3"] {
width: 29.7cm;
height: 42cm;
}
.page[size="A3"][layout="landscape"] {
width: 42cm;
height: 29.7cm;
}
.page[size="A5"] {
width: 14.8cm;
height: 21cm;
}
.page[size="A5"][layout="landscape"] {
width: 21cm;
height: 14.8cm;
}
#media print {
body,
page {
margin: 0;
box-shadow: 0;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.349/pdf.min.js"></script>
<input type="file" id="pdf-upload" />
<hr/>
<canvas class="page" size="A4" layout="landscape"></canvas>