PDF Preview plugin for FilePond

The PDF Preview plugin is an Extenxion of FilePond that will render a small preview when the uploaded file is of type PDF. It will use the browser native renderer.

Quick Start

Install using npm:

1npm install filepond-plugin-pdf-preview

Or install using Yarn:

1yarn add filepond-plugin-pdf-preview

Or using a CDN refernce:

1https://unpkg.com/filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.min.js

Then import in your project:

1import * as FilePond from "filepond";
2import FilePondPluginPdfPreview from "filepond-plugin-pdf-preview";

Or reference it by CDN

1<script src="https://unpkg.com/filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.min.js"></script>

Register the plugin:

1FilePond.registerPlugin(FilePondPluginPdfPreview);

Create a new FilePond instance as normal.

1const pond = FilePond.create({
2  name: "filepond",
3});
4
5// Add it to the DOM
6document.body.appendChild(pond.element);

The preview will become active when uploading a PDF file.

Change the defaults

If you want you can change the defaults for this plugin

in the javascript

1pond.setOptions({
2    allowPdfPreview: true,
3    pdfPreviewHeight: 320,
4    pdfComponentExtraParams: 'toolbar=0&view=fit&page=1'            
5 });

or in the html with the 'data-' atributes in the html tag

1<input type="file"         
2    data-pdf-preview-height="320"  
3    data-pdf-component-extra-params="toolbar=0&navpanes=0&scrollbar=0&view=fitH"
4/>

Default styles

Be sure to include this lib's styles, by importing the minified css.

1import "filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.min.css";

or by CDN

1<link href="https://unpkg.com/filepond-plugin-pdf-preview/dist/filepond-plugin-pdf-preview.min.css" rel="stylesheet">

Demo

View the demo