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

“updaterect”

Fired when the element rect has been updated

const element = document.querySelector("file-pond");

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

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

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

entry-store-state

entry-info

entry-status

entry-button

The default style for the entry button

file-pond::part(entry-button) {
}

entry-media

media-controls

media-button

The default media button style