FilePond uploads anything you throw at it, and offers a great, accessible, silky smooth user experience.
The <file-pond> custom element feels right at home on a classic webpage…
Svelte
React
Vue
jQuery
Angular
Alpine
Tailwind
Bootstrap
Skeleton
Foundation<form action="/upload" method="POST">
<file-pond>
<label for="my-file">Drop files here</label>
<input id="my-file" type="file" name="docs" />
</file-pond>
<button type="submit">Upload</button>
</form>
<script type="module">
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
defineFilePond({ locale });
</script>
…and turns into a <Component> when used with a JavaScript framework.
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
defineFilePond({ locale });
export default function App() {
const [myEntries, setMyEntries] = useState<FilePondEntry[]>([]);
return (
<file-pond entries={myEntries}>
<label htmlFor="my-file">Drop files here</label>
<input id="my-file" type="file" name="docs" />
</file-pond>
);
}The layout engine animates elements to new positions using the power of springs.
The user interface is automagically animated no matter the CSS layout.
Extend FilePond with 24 ready made extensions.
Quickly build store, transform, and validation extensions, or start from scratch and create a fully custom extension.
Accept files from paste events.
Accept files dropped on a specified element.
Accept files from a specified file input element
Convert Blob sources into Files.
Convert Canvas sources into Blobs.
Convert a DataTransfer into a File tree.
Convert URL sources into Files.
Simulate File loading.
Validate files based on their extension.
Validate files based on their mime type.
Validate files based on their name.
Validate files based on their min and/or max size.
Validate the file list based on the amount of files in the list.
Validate the file listsize based on the total size of the files in the list.
Validate images and videos based on their width and height values.
Store the encoded data URL of the file.
Store the file object using a form post.
Store the file object by uploading it in chunks.
Store the blob URL of a file.
Simulate storing a file.
Store a stringified representation of the current entry tree in a specified input element.
Handle storage with a callback function.
Renders the current state of the file tree to the developer console.
Renders the current state of the file tree to a specified HTML element.
If the browser can present it, so can FilePond.
Using the appendEntryImageView and appendEntryVideoView template functions FilePond can render media previews inside file entries.
When possible previews are rendered on a separate thread.
Configure how previews are rendered inside the entry tile.
Use FilePond without a user interface. Useful for programmatic processing of files or when building a custom UI on top of FilePond core.
import { createFilePondEntryTree, createExtensionManager } from 'filepond';
const entryTree = createFilePondEntryTree();
const extensionManager = createExtensionManager(entryTree);
entryTree.entries = [
new File(/* */)
];FilePond uses CSS color-scheme to make switching between light and dark mode super easy.
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}FilePond integrates beautifully with Pintura unlocking the perfect image editing experience for your users.