Properties

springDefaults

springDefaults: SpringOptions

Automatically passes this value to child elements, for usage see FilePondSvelteComponentElement

animations

animations: AnimationMode

Automatically passes this value to child elements, for usage see FilePondSvelteComponentElement

extensions

extensions: ExtensionFactory[]

Sets the current extensions on all FilePond elements

noAttribution

noAttribution: boolean

A programmatic way of toggling the attribution link on/off.

This automatically adds the noattribution attribute to the <file-pond> element. 

const element = document.querySelector('file-pond');
element.noAttribution = true;

Events

computerect

Fired when the element rect has been computed

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

updaterect

Fired when the element visual rect has been updated

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

Attributes

noattribution

FilePond is a free MIT licensed software package, please support the project by displaying the tiny “Powered by FilePond” link. The link has a rel="nofollow" attribute so will be ignored by search engine crawlers.

If you intend to remove the attribution link please consider supporting the project by donating or by linking to filepond.com elsewhere on your website. Your support helps to keep this project alive.

To remove the attribution link add the noattribution attribute to the <file-pond> element, or programmatically set the noAttribution property. 

<file-pond noattribution>
<!-- inner elements -->
</file-pond>

Custom Properties

The <file-pond> element exposes a set of default CSS Custom Properties, the values of these properties are then used by the inner elements. See the Parts section for more detailed styling instructions.

default-font-family

file-pond {
  --default-font-family: inherit;
}

default-line-height

file-pond {
  --default-line-height: 1.5;
}

default-color

The default color used to calculate colors for text, progressbars, borders, and other elements. See the default value of --default-border as an example. 

file-pond {
  --default-color: CanvasText;
}

default-background-color

The default color used for the entry background.

file-pond {
  --default-background-color: color-mix(in srgb, CanvasText 10%, Canvas 100%);
}

default-accent-color

file-pond {
  --default-accent-color: #007aff;
}

default-padding

The default padding used to calculate all other element padding values.

file-pond {
  --default-padding: 1em;
}

default-border-radius

The default padding used to calculate various elements border-radius values.

file-pond {
  --default-border-radius: 1.25em;
}

default-border

The default border style.

file-pond {
  --default-border: 1px solid rgb(from CanvasText r g b / 0.1);
}

default-backdrop-filter

file-pond {
  --default-backdrop-filter: blur(20px) saturate(1.25);
}

Parts

The <file-pond> element exports a selection of parts that we can use to more finely style its inner elements.

browse-button

Selects the browse <button> element.

drop-area

Selects the <file-pond-drop-area> element. 

file-pond::part(drop-area) {
  --border-radius: 1em;
}

drop-indicator

Selects the <file-pond-drop-indicator> element. 

file-pond::part(drop-indicator) {
  --border-radius: 1em;
}

Used to style the attribution link, to hide the link, see noAttribution 

file-pond::part(attribution-link) {
  color: aquamarine;
}

entry-list

The <file-pond-entry-list> element. 

file-pond::part(entry-list) {
  --entry-padding: 0.5em;
}

list

The lists inside the <file-pond-entry-list> 

file-pond::part(list) {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

entry

The entries inside <file-pond-entry-list> 

file-pond::part(entry) {
  color: white;
  background-color: black;
}

entry-load-state

The loading state indicator

entry-store-state

The storage state indicator

entry-info

The entry name and size elements

entry-status

The entry status list, among others displays the validation status

entry-button

The entry button

file-pond::part(entry-button) {
  color: red;
}

entry-media

The element containing the preview image or video

media-controls

The element containing the controls overlayed on top of media

media-button

The button elements inside the media controls element