Properties

template

Template to use for rendering different types

template?: TemplateNode[]

beforeRenderNode

Hook to manipulate nodes before rendering

beforeRenderNode?: (node: TemplateNode, context: NodeContext, sharedContext: NodeContext) => TemplateNode | void | false

drop

Toggle drop functionality on/off

drop?: boolean

dropRoot

Which element to use as drop container, defaults to null

dropRoot?: HTMLElement

dropPadding

Padding around drop area that will also catch drops, defaults to 20

dropPadding?: number

drag

Toggle drag functionality on/off

drag?: boolean

dragGrabTimeout

User needs to hold down on item for this amount of milliseconds to start dragging operation. Defaults to 100

dragGrabTimeout?: number

dragDetachMargin

The distance from the root element after which the element will be detached from the list, defaults to 40

dragDetachMargin?: number

dragSafetyMargin

The distance from the root element after which the element will be removed when dropped, defaults to 80, set to Infinity to prevent removal by dragging

dragSafetyMargin?: number

disabled

Toggle the UI on/off

disabled?: boolean

entryAnimationOriginMap

Maps Entry origin to animation for intro effect

entryAnimationOriginMap?: { [origin: string]: string; }

entryAnimationProps

Animation configuration for each entry animation

entryAnimationProps?: { [animation: string]: EntryAnimation; }

entryAnimationStaggerInterval

Delay to use between entry animations that are staggered (insert / remove)

entryAnimationStaggerInterval?: number

assets

The assets resource to use for icons, defaults to {}

assets?: { [key: string]: string; }

locale

The locale resource props to use for text, defaults to {}

locale?: Locale

byteUnits

The data format to use in the templates

byteUnits?: "mega" | "mebi"

propResourceMap

Automatically maps a property name to a resource value in locale and/or assets, defaults to { title: 'locale', label: 'locale', icon: 'assets' } meaning that the value of a label property is automatically looked up in the locale property 

propResourceMap?: { [componentProperty: string]: string; }

Methods

onSetEntries

Called when entries are set

onSetEntries(
  entries: FilePondEntry[]
):void

onInsertEntry

Called when entry is inserted

onInsertEntry(
  entry: FilePondEntry
):void

onRemoveEntry

Called when entry is removed

onRemoveEntry(
  detail: {
        entry: FilePondEntry;
        index: number[];
    }
):void

setSetEntriesCallback

Set the callback to use when the view updates entries

setSetEntriesCallback(
  cb: (entries: FilePondEntry[]) => void
):void

setInsertEntriesCallback

Set the callback to use when user wants to remove entry

setInsertEntriesCallback(
  cb: (entry: FilePondEntrySource | FilePondEntrySource[], index?: number | number[]) => void
):void

setRemoveEntriesCallback

Set the callback to use when user wants to remove entry

setRemoveEntriesCallback(
  cb: (...needles: Needle[]) => ({
        entry: FilePondEntry;
        index: number[];
    } | void)[] | {
        entry: FilePondEntry;
        index: number[];
    } | void
):void

setUpdateEntryCallback

Set the callback to use for updating entry state

setUpdateEntryCallback(
  cb: (needle: Needle, ...props: any[]) => void
):void

setGetEntryExtensionStateCallback

Set the callback to use to get the current entry state

setGetEntryExtensionStateCallback(
  cb: (entry: FilePondEntry) => {
        [key: string]: any;
    }
):void

setSetEntryExtensionStateCallback

Set the callback to use to update the entry status

setSetEntryExtensionStateCallback(
  cb: (entry: FilePondEntry, props: {
        [key: string]: any;
    }) => void
):void

setPushTaskCallback

setPushTaskCallback(
  cb: (id: string, fn: Function) => void
):void

setAbortTaskCallback

setAbortTaskCallback(
  cb: (id: string, fn: Function) => void
):void

Events

dragentrystart

Fired when an entry drag operation starts

element.addEventListener("dragentrystart", (e) => {
  // Event handler
});

dragentry

Fired when an entry is dragged

element.addEventListener("dragentry", (e) => {
  // Event handler
});

dragentryend

Fired when an entry drag operation ends

element.addEventListener("dragentryend", (e) => {
  // Event handler
});

updateplaceholder

Fired when a placeholder rect is updated

element.addEventListener("updateplaceholder", (e) => {
  // Event handler
});

Custom Properties

These are the custom properties that can be set on the <file-pond-entry-list> element.

entry-padding

file-pond-entry-list {
  --entry-padding: calc(var(--default-padding) * 0.5);
}

entry-shadow

The entry shadow. This style is applied to the element panel that is erendered behind the entry. For performance reasons this style is not applied to virtual elements.

file-pond-entry-list {
  --entry-shadow: none;
}

entry-lifted-shadow

Shadow style to use when lifting/dragging an entry.

file-pond-entry-list {
  --entry-lifted-shadow: none;
}

entry-min-height

The minimum height the entry should occupy.

file-pond-entry-list {
  --entry-min-height: 2.5em;
}

entry-color

Default color used for text.

file-pond-entry-list {
  --entry-color: currentColor;
}

entry-background-color

The color of the entry background. This style is set on the element panel that is rendered behind the entry and on virtual entry elements.

file-pond-entry-list {
  --entry-background-color: inherit;
}

entry-border-radius

The radius of the entry border. This style is set on the element panels that are rendered in front and behind the entry, and on the virtual entry element. It’s also used for clipping media.

file-pond-entry-list {
  --entry-border-radius: calc(var(--default-border-radius, 0) * 0.5);
}

entry-border

The style of the entry border, is set on the element panel that is rendered in front of the entry.

file-pond-entry-list {
  --entry-border: var(--default-border, none);
}

entry-border-top

Inherits --entry-border style. 

file-pond-entry-list {
  --entry-border-top: var(--entry-border);
}

entry-border-right

Inherits --entry-border style. 

file-pond-entry-list {
  --entry-border-right: var(--entry-border);
}

entry-border-bottom

Inherits --entry-border style. 

file-pond-entry-list {
  --entry-border-bottom: var(--entry-border);
}

entry-border-left

Inherits --entry-border style. 

file-pond-entry-list {
  --entry-border-left: var(--entry-border);
}

media-background-color

file-pond-entry-list {
  --media-background-color: black;
}

image-rendering

The default render quality of images. On slower devices pixelated results in a big performance boost, set to smooth for better image quality.

file-pond-entry-list {
  --image-rendering: pixelated;
}

font-size-m

file-pond-entry-list {
  --font-size-m: 0.75em;
}

font-size-s

file-pond-entry-list {
  --font-size-s: 0.625em;
}

font-size-xs

file-pond-entry-list {
  --font-size-xs: 0.5em;
}

status-info

file-pond-entry-list {
  --status-info: #a7d6fb;
}

status-success

file-pond-entry-list {
  --status-success: #97e1a8;
}

status-warning

file-pond-entry-list {
  --status-warning: #f9db82;
}

status-error

file-pond-entry-list {
  --status-error: #f7938c;
}

status-system

file-pond-entry-list {
  --status-system: #d3d3d3;
}