Image size validation
The Image Size Validation plugin handles blocking of image that are either too small or too large.
Installation
Using npm
npm i filepond-plugin-image-validate-size --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 FilePondPluginImageValidateSize from 'filepond-plugin-image-validate-size';
// Register the plugin
FilePond.registerPlugin(FilePondPluginImageValidateSize);
Using a CDN
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-validate-size/dist/filepond-plugin-image-validate-size.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// Register the plugin
FilePond.registerPlugin(FilePondPluginImageValidateSize);
// ... FilePond initialisation code here
</script>
Manual installation
<!-- add before </body> -->
<script src="filepond-plugin-image-validate-size.js"></script>
<script src="filepond.js"></script>
<script>
// Register the plugin
FilePond.registerPlugin(FilePondPluginImageValidateSize);
// ... FilePond initialisation code here
</script>
Properties
Property | Default | Description |
---|---|---|
allowImageValidateSize | true |
Enable or disable image size validation. |
imageValidateSizeMinWidth | 1 |
The minimum image width. |
imageValidateSizeMaxWidth | 65535 |
The maximum image width. |
imageValidateSizeMinHeight | 1 |
The minimum image height. |
imageValidateSizeMaxHeight | 65535 |
The maximum image height. |
imageValidateSizeLabelFormatError | 'Image type not supported' |
The message shown when the image is not supported by the browser. |
imageValidateSizeLabelImageSizeTooSmall | 'Image is too small' |
The message shown when the image is too small. |
imageValidateSizeLabelImageSizeTooBig | 'Image is too big' |
The message shown when the image is too big. |
imageValidateSizeLabelExpectedMinSize | 'Minimum size is {minWidth} × {minHeight}' |
Message shown to indicate the minimum image size. |
imageValidateSizeLabelExpectedMaxSize | 'Maximum size is {maxWidth} × {maxHeight}' |
Message shown to indicate the maximum image size. |
imageValidateSizeMinResolution | null |
The minimum image resolution. |
imageValidateSizeMaxResolution | null |
The maximum image resolution. |
imageValidateSizeLabelImageResolutionTooLow | 'Resolution is too low' |
The message shown when the image resolution is too low. |
imageValidateSizeLabelImageResolutionTooHigh | 'Resolution is too high' |
The message shown when the image resolution is too high. |
imageValidateSizeLabelExpectedMinResolution | 'Minimum resolution is {minResolution}' |
Message shown to indicate the minimum image resolution. |
imageValidateSizeLabelExpectedMaxResolution | 'Maximum resolution is {maxResolution}' |
Message shown to indicate the maximum image resolution. |
imageValidateSizeMeasure | null |
A custom function to measure the image file, for when you want to measure image formats not supported by browsers. Receives the image file, should return a Promise. Resolve should pass a size object containing both a width and height parameter. Reject should be called if the image format is not supported / can’t be measured. |