To make integrating FilePond easier it ships with a selection of developer tools.

Entry tree inspection

We can register the ConsoleView extension. This extension logs the state of the current file tree to the developer console. 

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { ConsoleView } from 'filepond/extensions/console-view.js';

const elements = defineFilePond({
    locale,
    extensions: [ConsoleView],
});

elements.forEach((element) => {
    element.entries = [
        {
            name: 'my-file.txt',
            size: 1234,
        },
    ];
});

Simulated file load and storage

To test file loading and uploading we can use the SimulatedLoader and SimulatedStore, this makes it easy to customize the user interface without having to load or upload real data.

Test content

We can use generateFile, generateImage, generateVideo, and generateDocument to generate test files. 

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { ConsoleView } from 'filepond/extensions/console-view.js';
import { createFilePondEntryList, appendEntryImageView } from 'filepond/templates';
import { generateImage } from 'filepond/dev';

// so we can see the generated image
const template = createFilePondEntryList();
appendEntryImageView(template);

// default filepond init
const elements = defineFilePond({
    locale,
    EntryListView: {
        template,
    },
    extensions: [
        // for debugging purposes
        ConsoleView,
    ],
});

elements.forEach(async (element) => {
    element.entries = [
        // generate a test image
        await generateImage(),
    ];
});