A flexible JavaScript File Upload Component that works with every stack

Feature highlights

• Turn anything into a file

  Load directories, files, blobs, canvas elements, data transfers, local URLs, remote URLs, and data URLs.

• Upload sync or async

  Synchronous uploading by default, easily expand to async, or chunked uploading with extensions.

• Add data from anywhere

  Supports drag and drop, copy and paste, select with file input, or load files using the API.

• Optimise images

  Automatically validate, orient, crop, resize, and compress images on the client for reduced bandwidth usage and faster uploads.

• Accessibile defaults

  Tested with AT software. Correctly moves focus, fully navigable with keyboard, mouse, and touch interaction.

• Great UX on any device

  Finely tuned touch areas, optimised drag and drop functionality. Fully functional and fine-tuned for both mobile and desktop devices.

A custom element 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>
    );
}

Animated with the power of springs

Extendable, tree shakeable, compatible with SSR

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

26 Extensions

• 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. Use with ImageBitmapTransform to automatically optimise valid images before upload.

• FileNameTransform

  Automatically or manually rename files.

• ImageBitmapTransform

  Automatically orient, crop, resize, and compress images. Use with MediaResolutionValidator to filter out and optimise unwanted images before upload.

• 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 image and video previews

Drop the UI and use in 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(/* */)
];

Fits in with light and dark themes

Huge palls with Pintura