File uploader v3 validation
Content validation is a common case. You want to allow users to only upload files of certain sizes, types, image dimensions, etc. That’s where File Validation comes in. It’s carried out via validators.
fileInfo object for each
uploaded file and throws an exception if that file does not meet validation
Simple File Size Check
The simplest validatior, which checks file sizes, can look like this:
Wrapping Validators in Functions
It is better to wrap validators in a function that receives a constant, like a file size threshold. Such validators can then be reused by different file uploaders:
Validation Based on Data Attributes of Input Elements
Validation can also be implemented based on data attributes of input elements.
For example, if your file uploader has the
data-max-size option enabled, we can add
maxFileSize validatior in the following manner:
Here are some common validation cases for you to consider,
The example below shows how to add validation for both min and max file sizes.
A validator is automatically added to each file uploader with
data-max-size custom attributes.
fileTypeLimit is another validator that can be added to file uploaders with the
data-file-types custom attribute whose value is a space-separated list of
allowed files extensions.
data-file-types can be combined with the
data-input-accept-types attribute that holds accepted MIME types:
in the example below.
For images, you can define the
maxDimensions validator that will be added to
file uploaders with either
data-max-height custom attributes.
maxDimensions only checks image dimensions even though it accepts
any file type. You can combine it with the
data-images-only attribute to change
This validator denies landscape images with the
attribute and portrait images with the
There is no point in adding both of those attributes to the same file uploader.
Validators as File Uploader Options
You can also moderate content via file uploader options. Such options are called validators. Here are the most common ones:
- Allow images only
- Allow certain input accept types
- Set file uploader preferred MIME types