The PDF Convert plugin is an Extenxion of FilePond that will convert a PDF file into an image. It will use library PDF.js.

Requirement:

• FilePond (https://github.com/pqina/filepond)
• PDF.js (https://github.com/mozilla/pdf.js)

Install using npm:

npm install filepond-plugin-pdf-convert

Or install using Yarn:

yarn add filepond-plugin-pdf-convert

Or using a CDN refernce:

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

Then import in your project:

import * as FilePond from "filepond";
import FilePondPluginPdfConvert from "filepond-plugin-pdf-convert";

Or reference it by CDN

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

Register the plugin:

FilePond.registerPlugin(FilePondPluginPdfConvert);

Create a new FilePond instance as normal.

const pond = FilePond.create({
  name: "filepond",
});

// Add it to the DOM
document.body.appendChild(pond.element);

The conversion will become active when uploading a PDF file.

If you want you can change the defaults for this plugin

in the javascript

pond.setOptions({
    pdfConvertType: 'image/png',
    pdfConvertMarginHeight: 60
 });

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

<input type="file"
    data-pdf-convert-type="image/png"
    data-pdf-convert-margin-height="60"
/>

View the demo