Properties

disabled

Disable the field and sets the disabled attribute

disabled: boolean

webkitdirectory

Set the field webkitdirectory state

webkitdirectory: boolean

multiple

Toggle the field multiple state

multiple: boolean

readOnly

Set field as readonly. Only for situations where FilePond has initial files and those files should be posted. The readonly attribute isn’t supported on a file input element as it cannot have an initial value.

readOnly: boolean

required

Set field as required

required: boolean

accept

Accepted files setter https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

accept: string

animations

Setting to toggle animations

animations: AnimationMode

noBrowse

Toggle browse button

noBrowse: boolean

minSize

Min file size setter, accepts a number of bytes or a natural filesize string like 1MB

minSize: number | string | undefined

maxSize

Max file size setter, accepts a number of bytes or a natural filesize string like 1MB

maxSize: number | string | undefined

minListSize

Min total file size setter, accepts a number of bytes or a natural filesize string like 1MB

minListSize: number | string | undefined

maxListSize

Max total file size setter, accepts a number of bytes or a natural filesize string like 1MB

maxListSize: number | string | undefined

minFiles

Min total entries setter, an integer, defaults to 0

minFiles: number

maxFiles

Max total entries setter, an integer, defaults to Infinity

maxFiles: number

entries

Set the current entries

entries: FilePondEntry[]

locale

Sets the locale

locale: Locale | undefined

extensions

Sets custom extensions to load

extensions: ExtensionFactory[]

workersURL

Update worker url

workersURL: URL

on

Subscribe to internal entryTree events

on: EntryTreeOn

name

Sets the current field name

name: string | undefined

form

Proxy for Element internals form getter 

form: HTMLFormElement | undefined

value

Sets/Updates the value of the the entry manager

Will also remember this value for when form is reset

value: FilePondEntry[]

validity

Proxy for element internals validity getter 

validity: ValidityState

validationMessage

Proxy for element internals validationMessage getter 

validationMessage: string

Methods

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 in the entry tree

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

removeEntries

Find entries in the entry tree

removeEntries(
  ...needles: Needle[]
):void | {
        entry: FilePondEntry;
        index: number[];
    } | (void | {
        entry: FilePondEntry;
        index: number[];
    })[]

sortEntries

Sorts the entry tree using the passed sorting function

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

updateEntry

Update an entry

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

updateEntryState

Update an entry state

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

moveEntry

Move entry from current location to new index

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

replaceEntry

Replace entry with one or more entries

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

checkValidity

Validates the current state of the field

checkValidity(
):boolean | undefined

reportValidity

Proxy for element internals reportValidity() method

reportValidity(
):void

Events

change

Fired when form value changed

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

update

Fired when entries list updated

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

connected

Fired when 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.