We can customize the component templates used by FilePond to render the user interface.

The createFilePondEntryList function returns the default template used by FilePond to render the user interface.

Presets

These are helper functions that append a rich component to the template.

Image view

We can use the appendEntryImageView helper function to add an image preview. This will show a preview of added images. 

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { createFilePondEntryList, appendEntryImageView } from 'filepond/templates';

// Add image view to default template
const template = createFilePondEntryList();
appendEntryImageView(template, {
    // Image view options
});

defineFilePond({
    locale,

    // Set custom template
    EntryListView: {
        template,
    },
});

Video view

We can use the appendEntryVideoView helper function to add a video preview. This will show a video player when videos are added that are supported by the browser. 

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { createFilePondEntryList, appendEntryImageView } from 'filepond/templates';

// Add video view to default template
const template = createFilePondEntryList();
appendEntryVideoView(template, {
    // Video view options
});

defineFilePond({
    locale,

    // Set custom template
    EntryListView: {
        template,
    },
});