Extends FilePondSvelteComponentElement

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
});