Filepond instance

Here is a few practical examples on how to extend/modify Filepond behavior.

All these code changes goes into <comoponentName>/filepond.htm partial located on your theme.

If you don't have this file, you should copy from plugin source.
Refer to Extending Filepond section

Remove file size validation

Delete following lines:

<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>

FilePond.registerPlugin(FilePondPluginFileValidateSize);

allowFileSizeValidation: true,
maxFileSize: '{{ allowed_filesize }}KB',

More info on File size validation from Filepond docs

Add file type validation

Add following line before main Filepond JavaScript file

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

FilePond.registerPlugin(FilePondPluginFileValidateType);

Add following lines to Filepond instance. It should look similar to:

const pond = FilePond.create(inputElement, {
    onaddfilestart: (file) => { isLoadingCheck(); },
    onprocessfile: (files) => { isLoadingCheck(); },
    onremovefile: (files) => { isLoadingCheck(); },
    onupdatefiles: (files) => { isLoadingCheck(); },
    allowFileTypeValidation: true,
    acceptedFileTypes: "['image/png', 'image/jpeg']",
});

More info on File type validation from Filepond docs

Remove Filepond credits

Read Filepond docs before disabling credits.

Add credits: false to your instance:

const pond = FilePond.create(inputElement, {
    onaddfilestart: (file) => { isLoadingCheck(); },
    onprocessfile: (files) => { isLoadingCheck(); },
    onremovefile: (files) => { isLoadingCheck(); },
    onupdatefiles: (files) => { isLoadingCheck(); },
    credits: false
});

Multiple file inputs

PENDING