♥

Combine FilePond with Pintura and create the perfect image edit and upload experience.

Learn more about Pintura

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.

Installation

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
FilePond.registerPlugin(FilePondPluginFileValidateType);

Using a CDN

<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileValidateType);

    // ... FilePond initialisation code here
</script>

Manual installation

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

<script>
    // Register the plugin
    FilePond.registerPlugin(FilePondPluginFileValidateType);

    // ... FilePond initialisation code here
</script>

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

            resolve(type);
        }),
});

Properties

true

[]

'File of invalid type'

'Expects {allButLastType} or {lastType}'

{}

null