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.
Install using npm:
npm install filepond-plugin-media-previewThen 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.
Both the video and audio preview can be enabled or disabled. Use the following options:
const pond = FilePond.create({
name: 'filepond',
allowVideoPreview: true, // default true
allowAudioPreview: true // default true
});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';
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent