Rendering a PDF preview in JavaScript is a common requirement in most modern web applications these days. Whether you're building a file uploader or simply want to give users a sneak peek of their selected files, this feature greatly improves the user experience.
In this guide, we'll walk you through the process of creating a PDF preview using vanilla JavaScript, ensuring your users can see their selected files before uploading.
HTML & JavaScript Example
Here is the source to a running example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Preview</title>
</head>
<body>
<form>
<input type="file" id="pdfUpload" accept="application/pdf">
<br><br>
<iframe id="pdfPreview" width="600" height="500"></iframe>
</form>
<script>
document.getElementById('pdfUpload').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file.type === "application/pdf") {
const fileURL = URL.createObjectURL(file);
document.getElementById('pdfPreview').src = fileURL;
} else {
alert("Please upload a valid PDF file.");
}
});
</script>
</body>
</html>
And a quick demo of what that would look like down below:
Demo
On file select, you should see your PDF in the <iframe> above. Note that the specific controls and styling of the actual PDF will vary depending on your particular browser.
How does it work
There are 2 important HTML elements needed for this to work:
<form>
<input type="file" id="pdfUpload" accept="application/pdf">
<br><br>
<iframe id="pdfPreview" width="600" height="500"></iframe>
</form>
The <input> element set to accept "application/pdf" documents.
And an <iframe> placeholder which will be where our uploaded files get rendered.
Next up, we're going to bind the 'change' event handler to the input element itself, which will trigger whenever a file has been selected.
<script>
document.getElementById('pdfUpload').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file.type === "application/pdf") {
const fileURL = URL.createObjectURL(file);
document.getElementById('pdfPreview').src = fileURL;
} else {
alert("Please upload a valid PDF file.");
}
});
</script>
The script is broken down into the following steps:
1. First we retrieve the file being uploaded from event.target.files[0] . For the sake of this example we can assume that there is only 1 file being selected.
2. We then create a URL object, in order to store our file, using leveraging the URL.createObjectURL method and passing in our file.
3. And lastly we set the src property of our desired <iframe> with the newly created URL object.
Multiple files
If you're looking to create multiple PDF previews at the same time, assuming that a user can select multiple files, you will need to render multiple <iframe>'s, one per preview.
You can then iterate through the event.target.files array and using the same steps shown above, create a new <iframe> dynamically and set its src accordingly.
Walter Guevara is a Computer Scientist, software engineer, startup founder and previous mentor for a coding bootcamp. He has been creating software for the past 20 years.
Last updated on:
Have a question on this article?
You can leave me a question on this particular article (or any other really).
Ask a question