The Image Size Validation plugin handles blocking of image that are either too small or too large.
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);
<!-- 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>
<!-- 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>
Property | Default value | Description |
---|---|---|
allowImageValidateSize
|
| Enable or disable image size validation. | |
imageValidateSizeMinWidth
|
| The minimum image width. | |
imageValidateSizeMaxWidth
|
| The maximum image width. | |
imageValidateSizeMinHeight
|
| The minimum image height. | |
imageValidateSizeMaxHeight
|
| The maximum image height. | |
imageValidateSizeLabelFormatError
|
| The message shown when the image is not supported by the browser. | |
imageValidateSizeLabelImageSizeTooSmall
|
| The message shown when the image is too small. | |
imageValidateSizeLabelImageSizeTooBig
|
| The message shown when the image is too big. | |
imageValidateSizeLabelExpectedMinSize
|
| Message shown to indicate the minimum image size. | |
imageValidateSizeLabelExpectedMaxSize
|
| Message shown to indicate the maximum image size. | |
imageValidateSizeMinResolution
|
| The minimum image resolution. | |
imageValidateSizeMaxResolution
|
| The maximum image resolution. | |
imageValidateSizeLabelImageResolutionTooLow
|
| The message shown when the image resolution is too low. | |
imageValidateSizeLabelImageResolutionTooHigh
|
| The message shown when the image resolution is too high. | |
imageValidateSizeLabelExpectedMinResolution
|
| Message shown to indicate the minimum image resolution. | |
imageValidateSizeLabelExpectedMaxResolution
|
| Message shown to indicate the maximum image resolution. | |
imageValidateSizeMeasure
|
| 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. |
|