filepond-plugin-pdf-convert
Version:
Include PDF file convertor plugin
86 lines (60 loc) • 2.02 kB
Markdown
# PDF convert to image plugin for FilePond
[](https://github.com/alexandreDavid/filepond-plugin-pdf-convert/blob/master/LICENSE)
[](https://www.npmjs.com/package/filepond-plugin-pdf-convert)
The PDF Convert plugin is an Extenxion of FilePond that will convert a PDF file into an image. It will use library PDF.js.
<img src="https://raw.githubusercontent.com/alexandreDavid/filepond-plugin-pdf-convert/demo.gif" width="508" alt=""/>
## Quick Start
Requirement:
* FilePond (https://github.com/pqina/filepond)
* PDF.js (https://github.com/mozilla/pdf.js)
Install using npm:
```bash
npm install filepond-plugin-pdf-convert
```
Or install using Yarn:
```bash
yarn add filepond-plugin-pdf-convert
```
Or using a CDN refernce:
```js
https://unpkg.com/filepond-plugin-pdf-convert/dist/filepond-plugin-pdf-convert.min.js
```
Then import in your project:
```js
import * as FilePond from "filepond";
import FilePondPluginPdfConvert from "filepond-plugin-pdf-convert";
```
Or reference it by CDN
```html
<script src="https://unpkg.com/filepond-plugin-pdf-convert/dist/filepond-plugin-pdf-convert.min.js"></script>
```
Register the plugin:
```js
FilePond.registerPlugin(FilePondPluginPdfConvert);
```
Create a new FilePond instance as normal.
```js
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.
## Change the defaults
If you want you can change the defaults for this plugin
in the javascript
```js
pond.setOptions({
pdfConvertType: 'image/png',
pdfConvertMarginHeight: 60
});
```
or in the html with the 'data-' atributes in the html tag
```html
<input type="file"
data-pdf-convert-type="image/png"
data-pdf-convert-margin-height="60"
/>
```
[View the demo](https://alexandredavid.github.io/filepond-plugin-pdf-convert/)