Media Preview plugin for FilePond (+PDF)

The Media Preview plugin will kick in automatically when the uploaded file is of type video or audio and render a preview player inside the file item. For pdf files it will use the PDF.js native renderer.

Quick Start

Install using npm:

npm install ernestbrandi/filepond-plugin-media-preview

Then import in your project:

import * as FilePond from "filepond";
import FilePondPluginMediaPreview from "filepond-plugin-media-preview";

Register the plugin:

FilePond.registerPlugin(FilePondPluginMediaPreview);

Create a new FilePond instance as normal.

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

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

The preview will become active when uploading an video or audio file.

Default styles

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

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

Demo

View the demo