File type validation

The File Type Validation plugin handles blocking of files that are of the wrong type.

When creating a FilePond instance based on a input type file, this plugin will automatically interpret the accept attribute value.


Using npm

npm i filepond-plugin-file-validate-type --save

Now we can add the File Validate Type plugin to our project like this.

// Import FilePond
import * as FilePond from 'filepond';

// Import the plugin code
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';

// Register the plugin

Using a CDN

<!-- add before </body> -->
<script src=""></script>
<script src=""></script>

    // Register the plugin

    // ... FilePond initialisation code here

Manual installation

<!-- add before </body> -->
<script src="filepond-plugin-file-validate-type.js"></script>
<script src="filepond.js"></script>

    // Register the plugin

    // ... FilePond initialisation code here

Custom type detection

Sometimes a browser doesn't succeed in detecting the correct mime type for a file. In that situation the file type property is empty and FilePond can't determine the correct type either (it relies on the browser engine).

To work around this situation the fileValidateTypeDetectType property allows you to set a custom file type detector method. This method will be called with the file and the browser detected type, we can then override this type by returning our custom detected type.

FilePond.create(document.querySelector('input'), {
    acceptedFileTypes: ['image/png'],
    fileValidateTypeDetectType: (source, type) =>
        new Promise((resolve, reject) => {
            // Do custom type detection here and return with promise



Property Default value Description
Enable or disable file type validation
Array of accepted file types. Can be mime types or wild cards. For instance ['image/*'] will accept all images. ['image/png', 'image/jpeg'] will only accepts PNGs and JPEGs.
'File of invalid type'
Message shown when an invalid file is added
'Expects {allButLastType} or {lastType}'
Message shown to indicate the allowed file types. Available placeholders are {allTypes}, {allButLastType}, {lastType}.
Allows mapping the file type to a more visually appealing label, { 'image/jpeg': '.jpg' } will show .jpg in the expected types label. Set to null to hide a type from the label.
A function that receives a file and the type detected by FilePond, should return a Promise, resolve with detected file type, reject if can't detect.