Skip to content

nielsboogaard/filepond-plugin-media-preview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a677748 · Mar 13, 2024

History

60 Commits
Feb 18, 2022
Oct 11, 2022
Jun 5, 2019
Jun 5, 2019
Feb 18, 2022
Jun 5, 2019
Jun 5, 2019
Jun 6, 2019
Jun 5, 2019
Feb 18, 2022
Feb 15, 2024
Feb 15, 2024
Jun 5, 2019
Jun 5, 2019
Jun 5, 2019

Repository files navigation

Media Preview plugin for FilePond

License: MIT npm version

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.

Quick Start

Install using npm:

npm install 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.

Configuration

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
});

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