How to show PDF file upload previews using JavaScript

Filed under: web-development

Walter G.

3 minute read

How to show PDF file upload previews using JavaScript

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: September 26 2024