Properties

disabled

disabled: boolean

multiple

multiple: boolean

readOnly

readOnly: boolean

animations

animations: AnimationMode

entries

entries: FilePondEntry[]

locale

locale: Locale

extensions

extensions: ExtensionFactory[]

value

value: FilePondEntry[]

form

form: HTMLFormElement

Reference to the parent form.

validity

validity: ValidityState | undefined

validationMessage

validationMessage: string

required

required: boolean

accept

accept: string[]

minFiles

minFiles: number

maxFiles

maxFiles: number

minSize

minSize: number | string

maxSize

maxSize: number | string

minListSize

minListSize: number | string

maxListSize

maxListSize: number | string

Methods

on

Used to subscribe to internal events

on(
  type: string, 
  handler: (...args: any[]) => void
):() => void

insertEntries

Add one or more entries to the end of the list or insert them at a specific index

insertEntries(
  entry: FilePondEntry | FilePondEntry[], 
  index?: number | number[]
):void

findEntries

Find entries

findEntries(
  ...needles: Needle[]
):FilePondEntry | (FilePondEntry | undefined)[] | undefined

removeEntries

Remove entries from the list

removeEntries(
  ...needles: Needle[]
):void

sortEntries

Sort entries in the list

sortEntries(
  fn: (a: FilePondEntry, b: FilePondEntry) => 1 | -1 | 0
):void

updateEntry

Update an entry

updateEntry(
  needle: Needle, 
  ...props: any[]
):void

updateEntryState

Convenience method to update an entry state object

updateEntryState(
  needle: Needle, 
  ...props: any[]
):void

moveEntry

Move an entry from its current position to a new location in the list

moveEntry(
  needle: Needle, 
  index: number | number[]
):void

replaceEntry

Replace an entry with one or multiple entries

replaceEntry(
  needle: FilePondEntry[], 
  ...entries: FilePondEntry[]
):void

checkValidity

Trigger validation check

checkValidity():boolean | undefined

reportValidity

Report current validity

reportValidity():void

Events

“change”

Fired when the value of the custom element has changed.

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

“update”

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

“connected”

Fired when the custom element is connected to the DOM.

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

Attributes

required

Is this field required or not

name

The field name

disabled

Set to disable this field

multiple

Set to enable support for multiple files

animations

Toggle animations on/off, see FilePondSvelteComponentElement for usage.

accept

Will mirror the accept attribute on the file input. The value will be passed to the FileMimeTypeValidator and FileExtensionValidator extensions if they’re loaded.

min-files

A convenience attribute to set the minimum amount of files in the list, only works if the ListCountValidator extension is loaded.

max-files

A convenience attribute to set the maximum amount of files in the list, only works if the ListCountValidator extension is loaded.

min-size

A convenience attribute to set the minimum file size, only works if the FileSizeValidator extension is loaded.

max-size

A convenience attribute to set the maximum file size, only works if the FileSizeValidator extension is loaded.

min-list-size

A convenience attributeto set the minimum size for all items in the list, only works if the ListSizeValidator extension is loaded.

max-list-size

A convenience attribute to set the maximum size for all items in the list, only works if the ListSizeValidator extension is loaded.