A flexible JavaScript File Upload Component that works with every stack

A customelement that just works

<form action="/upload" method="POST">
    <label for="my-file">Document</label>
    <file-pond>
        <input id="my-file" type="file" name="doc" />
    </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>

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
defineFilePond({ locale });

export default function App() {
    const [myEntries, setMyEntries] = useState<FilePondEntry[]>([]);
    return (
        <label htmlFor="my-file">Document</label>
        <file-pond entries={myEntries}>
            <input id="my-file" type="file" name="doc" />
        </file-pond>
    );
}

Powered by Springs

Easily Extendable

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",
    },
  ],
});

• 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.

Polished Media Previews

Headless Mode

import { createFilePondEntryTree, createExtensionManager } from 'filepond';

// The EntryTree holds all the files
const entryTree = createFilePondEntryTree();

// The ExtensionManager manages the FilePond extensions ¯\_(ツ)_/¯
const extensionManager = createExtensionManager(entryTree);

// Add files to the mix, and the above objects handle the rest
entryTree.entries = [
    new File(/* */)
];

Light and Dark theme

Palls with Pintura