Image validate size

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 value 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. |