Validation

File extension

The value of the accept attribute on <input type="file"> is automatically passed to this extension.

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { FileExtensionValidator } from 'filepond/extensions/file-extension-validator';

defineFilePond({
    locale,
    extensions: [
        [
            FileExtensionValidator,
            {
                accept: ['.jpg', '.png'],
            },
        ],
    ],
});

File types

The value of the accept attribute on <input type="file"> is automatically passed to this extension.

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { FileMimeTypeValidator } from 'filepond/extensions/file-mime-type-validator';

defineFilePond({
    locale,
    extensions: [
        [
            FileMimeTypeValidator,
            {
                accept: ['image/jpg', 'image/png'],
            },
        ],
    ],
});

File size

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { FileSizeValidatgor } from 'filepond/extensions/file-size-validator';

defineFilePond({
    locale,
    extensions: [
        [
            FileMimeTypeValidator,
            {
                maxSize: '10MB',
            },
        ],
    ],
});

File name

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { FileNameValidatgor } from 'filepond/extensions/file-name-validator';

defineFilePond({
    locale,
    extensions: [
        [
            FileNameTypeValidator,
            {
                test: (name) => {
                    return name.length > 10;
                },
            },
        ],
    ],
});

List file count

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { ListCountValidator } from 'filepond/extensions/list-count-validator';

defineFilePond({
    locale,
    extensions: [
        [
            ListCountValidator,
            {
                maxFiles: 5,
            },
        ],
    ],
});

List file size

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { ListSizeValidator } from 'filepond/extensions/list-size-validator';

defineFilePond({
    locale,
    extensions: [
        [
            ListSizeValidator,
            {
                maxListSize: '25MB',
            },
        ],
    ],
});

Media resolution

import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { MediaResolutionValidator } from 'filepond/extensions/media-resolution-validator';

defineFilePond({
    locale,
    extensions: [
        [
            MediaResolutionValidator,
            {
                minWidth: 1024,
                minHeight: 768,
            },
        ],
    ],
});

Custom validation

createValidatorExtension();