Validate file type

We can use the File Type Validation plugin to only allow certain file types to be added.

In the example below we'll only allow images to be added.

import { create, registerPlugin } from 'filepond';
import 'filepond/dist/filepond.css';

// Import the File Type Validation plugin
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

// Register the plugin with FilePond
registerPlugin(FilePondPluginFileValidateType);

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

// Create a FilePond instance
create(input, {
    // Only accept images
    acceptedFileTypes: ['image/*'],
});

Sometimes you want to "manually" determine the type. For example when the browser cannot determine the file type and the type property of the file will be empty or when trying to discern an animated GIF from a normal GIF.

This is where the fileValidateTypeDetectType property can help us. It will always be called with the type detected by the browser and the source file, we can then correct the type or return the type detected by the browser.

import { create, registerPlugin } from 'filepond';
import 'filepond/dist/filepond.css';

// Import the File Type Validation plugin
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

// Register the plugin with FilePond
registerPlugin(FilePondPluginFileValidateType);

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

// Create a FilePond instance
create(input, {
    // Only accept images
    acceptedFileTypes: ['image/*'],

    fileValidateTypeDetectType: (source, type) =>
        new Promise((resolve, reject) => {
            // test if is xls file
            if (/\.xls$/.test(source.name)) return resolve('application/vnd.ms-excel');

            // accept detected type
            resolve(type);
        }),
});