Templating

We can customize the component templates used by FilePond to render the file list.

Add 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 { appendEntryImageView } from 'filepond/media';
import { locale } from 'filepond/locales/en-gb.js';

defineFilePond({
    locale,

    // Set entry list options
    EntryListView: {
        beforeAssignTemplate(template) {
            // Append the entry image view
            appendEntryImageView(template, {
                // image view options
            });

            // return template to entry list
            return template;
        },
    },
});

Add 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 { appendEntryImageView, appendEntryVideoView } from 'filepond/templates/media';
import { locale } from 'filepond/locales/en-gb.js';

defineFilePond({
    locale,

    // Set entry list options
    EntryListView: {
        beforeAssignTemplate(template) {
            // Append the entry image view for previewing images
            appendEntryImageView(template, {
                // image view options
            });

            // Append the entry video view for previewing videos
            appendEntryVideoView(template, {
                // video view options
            });

            // return template to entry list
            return template;
        },
    },
});