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
`filePosterItemOverlayShadowColor`	`null`	Three RGB values between 0 and 255 to determine shadow color, `[255, 0, 0]`.
`filePosterItemOverlayErrorColor`	`null`	Three RGB values between 0 and 255 to determine error color, `[255, 0, 0]`.
`filePosterItemOverlaySuccessColor`	`null`	Three RGB values between 0 and 255 to determine success color, `[255, 0, 0]`.