-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9751269
commit 808af9f
Showing
2 changed files
with
37 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,43 @@ | ||
# Media Preview plugin for FilePond | ||
|
||
[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/nielsboogaard/filepond-plugin-media-preview/blob/master/LICENSE) | ||
[![npm version](https://badge.fury.io/js/filepond-plugin-media-preview.svg)](https://badge.fury.io/js/filepond-plugin-media-preview) | ||
|
||
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. | ||
|
||
[Demo](https://nielsboogaard.github.io/filepond-plugin-media-preview/) | ||
<img src="https://github.com/nielsboogaard/filepond-plugin-media-preview/blob/master/demo.gif?raw=true" width="508" alt=""/> | ||
|
||
|
||
## Quick Start | ||
|
||
Install using npm: | ||
|
||
```bash | ||
npm install filepond-plugin-media-preview | ||
``` | ||
|
||
Then import in your project: | ||
|
||
```js | ||
import * as FilePond from 'filepond'; | ||
import FilePondPluginMediaPreview from 'filepond-plugin-media-preview'; | ||
``` | ||
|
||
Register the plugin: | ||
```js | ||
FilePond.registerPlugin(FilePondPluginMediaPreview); | ||
``` | ||
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 preview will become active when uploading an video or audio file. | ||
|
||
|
||
## Demo | ||
[View the demo](https://nielsboogaard.github.io/filepond-plugin-media-preview/) |