Security
Client-side validation is useful for catching user mistakes early, but it doesn’t stop malicious uploads.
Always perform validation on the server as well, to ensure uploaded files are safe.
Common use cases
Require one file
By default <file-pond> will accept multiple files. To limit the file count we set the max-files attribute or maxFiles property to 1.
This automatically:
- Updates labels and validation messages.
- Allows only one file to be selected in the system browse modal.
- Limits the amount of files that can added via drop and paste.
<form action="/upload" method="POST">
<label for="my-file">Document</label>
<file-pond id="my-file" max-files="1" required></file-pond>
<button type="submit">Upload</button>
</form>
<script type="module">
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
defineFilePond({
locale,
});
</script>
When we’re wrapping a file input FilePond follows the settings on the file input. When it doesn’t have the multiple attribute, FilePond automatically sets the max-files attribute to 1.
<form action="/upload" method="POST">
<label for="my-file">Document</label>
<file-pond>
<input id="my-file" type="file" name="files" required />
</file-pond>
<button type="submit">Upload</button>
</form>
<script type="module">
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
defineFilePond({
locale,
});
</script>Require one or more files
By default the <file-pond> element will allow multiple files to be selected, add the required attribute to it and it requires one or more files.
<form action="/upload" method="POST">
<label for="my-files">Documents</label>
<file-pond id="my-files" required></file-pond>
<button type="submit">Upload</button>
</form>
<script type="module">
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
defineFilePond({
locale,
});
</script>
When wrapping a file input we add the multiple keyword to the file input, FilePond now allows selecting multiple files.
<form action="/upload" method="POST">
<label for="my-files">Document</label>
<file-pond>
<input id="my-files" type="file" name="files" required multiple />
</file-pond>
<button type="submit">Upload</button>
</form>
<script type="module">
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
defineFilePond({
locale,
});
</script>Only accept PDFs
We add the accept attribute to the file input element and set the application/pdf mime time, we can also choose to set the .pdf extension.
<form action="/upload" method="POST">
<label for="my-file">Document</label>
<file-pond>
<input id="my-file" type="file" name="files" accept="application/pdf" required />
</file-pond>
<button type="submit">Upload</button>
</form>
<script type="module">
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
defineFilePond({
locale,
});
</script>Require exactly 3 files
When we expect a predefined number of files we can add the ListCountValidator extension. Now the min-files and max-files attributes control how many files we expect to be uploaded.
<form action="/upload" method="POST">
<label for="my-file">Document</label>
<file-pond min-files="3" max-files="3">
<input id="my-file" type="file" name="files" required multiple />
</file-pond>
<button type="submit">Upload</button>
</form>
<script type="module">
import { defineFilePond } from 'filepond';
import { locale } from 'filepond/locales/en-gb.js';
import { ListCountValidator } from 'filepond/extensions/list-count-validator.js';
defineFilePond({
locale,
extensions: [ListCountValidator],
});
</script>Item Validation
File Extension
Validate files based on their extension.
File Type
Validate files based on their mime type.
File Size
Validate files based on their min and/or max size.
File Name
Validate files based on their name.
Image and Video resolution
Validate images and videos based on their width and height values.
List Validation
List Count
Validate the file list based on the amount of files in the list.
List Size
Validate the file listsize based on the total size of the files in the list.
Custom validation
We use the createValidatorExtension function to create a custom file validator extension