EntryListView

Renders the current state of the file tree to a specified HTML element.

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { EntryListView } from 'filepond/extensions/entry-list-view.js';

defineFilePond({
    locale,
    extensions: [
        // Add the EntryListView extension
        EntryListView
    ]
})

Adding a file poster

To add a poster to a file we set the poster property on the EntryListView property of a file entry.

import { defineFilePond } from "filepond";
import { locale } from "filepond/locales/en-gb.js";
import { appendEntryImageView } from "filepond/media";
import { EntryListView } from "filepond/extensions/entry-list-view.js";
import { URLLoader } from "filepond/extensions/url-loader.js";

// Get reference to the element
const [element] = defineFilePond({
  locale,
  extensions: [
    // Need this to load entries from URLs
    URLLoader,

    // We add the entry image view so we can show posters
    [
      EntryListView,
      {
        beforeAssignTemplate(template) {
          appendEntryImageView(template);
          return template;
        },
      },
    ],
  ],
});

// Entries to load
element.entries = [
  {
    src: "my-file.txt",
    extension: {
      EntryListView: {
        // This will be picked up by the ImageView component
        poster: "./poster/my-poster.jpg",
      },
    },
  },
];