A flexible JavaScript file upload component that works with every stack

Use as Custom Element

<file-pond>
    <label for="my-file">Drop files here, or <u>browse</u></label>
    <input id="my-file" type="file" name="docs" />
</file-pond>
<button type="submit">Upload</button>

<script type="module">
    import { defineFilePond } from 'filepond';
    import { locale } from 'filepond/locales/en-gb.js';
    defineFilePond({ locale });
</script>

export default function App() {
    const [myEntries, setMyEntries] = useState<FilePondEntry[]>([]);
    return (
        <file-pond entries={myEntries}>
            <label htmlFor="my-file">
                Drop files here, or <u>browse</u>
            </label>
            <input id="my-file" type="file" name="docs" />
        </file-pond>
    );
}

Spring Powered Layout Engine

The layout engine automagically animates elements to new positions resulting in a fully animated user interface no matter the CSS layout.

Easily Extendable

• ClipboardSource

  Accept files from paste events.

• DragDropSource

  Accept files dropped on a specified element.

• FileInputSource

  Accept files from a specified file input element

• BlobLoader

  Convert Blob sources into Files.

• CanvasLoader

  Convert Canvas sources into Blobs.

• DataTransferLoader

  Convert a DataTransfer into a File tree.

• URLLoader

  Convert URL sources into Files.

• SimulatedLoader

  Simulate File loading.

• FileExtensionValidator

  Validate files based on their extension.

• FileMimeTypeValidator

  Validate files based on their mime type.

• FileNameValidator

  Validate files based on their name.

• FileSizeValidator

  Validate files based on their min and/or max size.

• ListCountValidator

  Validate the file list based on the amount of files in the list.

• ListSizeValidator

  Validate the file listsize based on the total size of the files in the list.

• MediaResolutionValidator

  Validate images and videos based on their width and height values.

• DataURLStore

  Store the encoded data URL of the file.

• FormPostStore

  Store the file object using a form post.

• ChunkedUploadStore

  Store the file object by uploading it in chunks.

• ObjectURLStore

  Store the blob URL of a file.

• SimulatedStore

  Simulate storing a file.

• TextInputStore

  Store a stringified representation of the current entry tree in a specified input element.

• ValueCallbackStore

  Handle storage with a callback function.

• ConsoleView

  Renders the current state of the file tree to the developer console.

• EntryListView

  Renders the current state of the file tree to a specified HTML element.

Preview Images and Videos

Headless Mode

import { createFilePondEntryTree, createExtensionManager } from "filepond";

const entryTree = createFilePondEntryTree();

const extensionManager = createExtensionManager(entryTree);

entryTree.entries = [new File(/* */)];