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.
Switch up the list layout and give reordering the items a try.
Extend FilePonds functionality with 24 ready made extensions.
Build your own store, transform, and validation extensions, or start from scratch and create a fully custom extension.
import { defineFilePond } from "filepond";
import { locale } from "filepond/locales/en-gb.js";
import { FileSizeValidator } from "filepond/extensions/file-size-validator.js";
const elements = defineFilePond({
locale,
// Let's limit the file size using the FileSizeValidator extension
extensions: [
FileSizeValidator,
{
maxSize: "10MB",
},
],
});
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.
When possible previews are rendered on a separate thread.
Learn about media previewsUse 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;
}
}
Unlock the perfect image and video editing experience for your users.
Pqina, run by Rik Schennink, helps more than 10,000 companies worldwide and is rated 4.9 out of 5 stars by 500+ customers.
FilePond is my way of proving the web can rival native apps, as long as we give it the attention it deserves.
