Asynchronous file upload

We can upload files asynchronously using the server property. This comes in handy if we want the user to make the final form submit speedier or, if a lot of files are uploaded, more stable.

We'll also be forced to use the the server property when uploading files on older browsers. Because older browsers don't support setting the file input element value we have no other way to upload dropped files to the server.

The Trouble with Editing and Uploading Files in the Browser

We can set the server property to a server URL or configure it to our liking with an object. The example below will POST files to the the /upload location on the same server.

import { parse } from 'filepond';
import 'filepond/dist/filepond.css';

// Get a file input reference
const input = document.querySelector('input[type="file"]');

// Create a FilePond instance and post files to /upload
create(input, {
    server: '/upload',
});

FilePond also uploads optional file metadata, it will send both a file object and a json string using the same field name.

With PHP we can access the file using $_FILES['filepond'] and the JSON string using $_POST['filepond'].

If we're using Node we can use a package like morgan to handle express form posts. Files will then be available in the req.files property.

Custom server

We can also upload to other locations, or store files in a different storage medium, by setting an object to the server property.

import { parse } from 'filepond';
import 'filepond/dist/filepond.css';

// Get a file input reference
const input = document.querySelector('input[type="file"]');

// Create a FilePond instance and post files to /upload
create(input, {
    server: {
        process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
            /* store file somewhere and call `load` when done */
        },
    },
});

For more information on setting custom server functions, read the advanced server documentation.