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.
How to show 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.
Here's the sample code for that process:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple PDF Previews</title>
</head>
<body>
<form>
<input type="file" id="pdfUpload" accept="application/pdf" multiple>
<br><br>
<div id="pdfPreviews"></div>
</form>
<script>
document.getElementById('pdfUpload').addEventListener('change', function(event) {
const previewContainer = document.getElementById('pdfPreviews');
previewContainer.innerHTML = ''; // Clear previous previews
Array.from(event.target.files).forEach(file => {
if (file.type === "application/pdf") {
const fileURL = URL.createObjectURL(file);
// Create iframe element
const iframe = document.createElement('iframe');
iframe.src = fileURL;
iframe.width = "600";
iframe.height = "500";
iframe.style.marginBottom = "10px";
// Append to preview container
previewContainer.appendChild(iframe);
} else {
alert("Please upload valid PDF files.");
}
});
});
</script>
</body>
</html>
The main difference with this approach is that we're creating the iframe's dynamically.
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:
AD: "Heavy scripts slowing down your site? I use
Fathom Analytics because it’s lightweight, fast, and doesn’t invade my users privacy." -
Get $10 OFF your first invoice.