File poster

The File Poster plugin makes it possible to show a custom image inside the file item.

Add a poster property to a file metadata object and set an image URL as its value, the File Poster plugin will pick it up and render the image inside the file item similar to the image preview plugin.

Installation

Using npm

npm i filepond-plugin-file-poster --save

Now we can add the File Poster plugin to our project like this.

// Import FilePond
import * as FilePond from 'filepond';

// Import the plugin code
import FilePondPluginFilePoster from 'filepond-plugin-file-poster';

// Import the plugin styles
import 'filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css';

// Register the plugin
FilePond.registerPlugin(FilePondPluginFilePoster);

Using a CDN

<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
<link
    href="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css"
    rel="stylesheet"
/>

<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFilePoster);

    // ... FilePond initialisation code here
</script>

Manual installation

<!-- add to document <head> -->
<link href="filepond.css" rel="stylesheet" />
<link href="filepond-plugin-file-poster.css" rel="stylesheet" />

<!-- add before </body> -->
<script src="filepond-plugin-file-poster.js"></script>
<script src="filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFilePoster);

    // ... FilePond initialisation code here
</script>

Usage

const pond = FilePond.create({
    files: [
        {
            // the server file reference
            source: '12345',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',

                // optional stub file information
                file: {
                    name: 'my-file.png',
                    size: 3001025,
                    type: 'image/png',
                },

                // pass poster property
                metadata: {
                    poster: './poster-image/file.png',
                },
            },
        },
    ],
});

Properties

Property Default value Description
allowFilePoster
true
Enable or disable the file poster functionality
filePosterMinHeight
null
Minimum poster height
filePosterMaxHeight
null
Maximum poster height
filePosterHeight
null
Fixed poster height, overrides min and max preview height
filePosterFilterItem
() => true
Receives file item, return true to ignore file
filePosterCrossOriginAttributeValue
'Anonymous'
Cross origin value to set to poster image element