Internationalization

We can change the language used for the FilePond labels to one of the available locales

Setting the initial language

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

defineFilePond({
    locale,
});

Updating the current language

import { locale } from 'filepond/locales/fr-fr.js';

element.locale = locale;

Changing Labels

Change specific labels by spreading a default locale object and overriding individual keys.

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

defineFilePond({
    locale: {
        ...en_GB,
        store: 'Upload',
        storeError: 'Failed to upload file',
    },
});

Use French locale but use a different label for store action.

import { locale } from 'filepond/locales/fr-fr.js';

element.locale = {
    ...locale,
    store: 'Upload',
};

Label variables

Certain locale keys receive information from FilePond which we can use to dynamically build the label.

For example the validationFileSizeOverflow receives the maxSize value as a natural file size.

We can use these variables in the string like this.

const locale = {
    // label locale key
    validationFileSizeOverflow:
        'This file is too large. Maximum size is {{maxSize}}.',
};

Label templates

We can also dynamically adjust the label based on the value of a variable. In the example below the ListCountValidator passes minFiles and maxFiles to the label.

Here we use minFiles as a value to show for example “Minimum required is 4 files”, but when the minimum is one file we want to show “file” instead of “files”.

Each key in the variables object relates to a variable in the label. The files.context property tells FilePond which value to use, in the example the value of minFiles. The files.map property selects a string for each value of context minFiles, if a value is not found it falls back to the else label.

In the example below we select “file” for a value of 1, for all other values we select “files”.

const locale = {
    // label locale key
    validationListEntryCountUnderflow: {
        template:
            'Too few files in the list. Minimum required is {{minFiles}} {{files}}.',
        variables: {
            files: {
                context: 'minFiles',
                map: {
                    1: 'file',
                    else: 'files',
                },
            },
        },
    },
};