Properties

disabled

disabled: boolean

multiple

multiple: boolean

readOnly

readOnly: boolean

animations

animations: AnimationMode

noBrowse

noBrowse: boolean

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

browse

Opens the system file browser

browse():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, internally sets the max-files attribute.

animations

Toggle animations on/off, see FilePondSvelteComponentElement for usage.

nobrowse

When added the browse button is not rendered

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.