File size validation

The File Size Validation plugin handles blocking of files that are too large.

Installation

Using npm

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

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

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

// Import the plugin code
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';

// Register the plugin
FilePond.registerPlugin(FilePondPluginFileValidateSize);

Using a CDN

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

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

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

Manual installation

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

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

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

Properties

Property Default value Description
allowFileSizeValidation
true
Enable or disable file size validation
minFileSize
null
The minimum size of a file, for instance 5MB or 750KB
maxFileSize
null
The maximum size of a file, for instance 5MB or 750KB
maxTotalFileSize
null
Maximum size of all files in list, same format as maxFileSize
labelMaxFileSizeExceeded
'File is too large'
Status message shown when large file is dropped.
labelMaxFileSize
'Maximum file size is {filesize}'
Detail message shown when max file size was exceeded. {filesize} is replaced with the value of the maxFileSize property.
labelMaxTotalFileSizeExceeded
'Maximum total size exceeded'
Status message shown when total file size exceeds maximum.
labelMaxTotalFileSize
'Maximum total file size is {filesize}'
Detail message shown when total file size exceeds maximum.