Content Moderation
Content moderation 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.
Validator is a JavaScript function that receives a fileInfo
object for each
uploaded file and throws an exception if that file does not meet validation
requirements.
- Simple File Size Check
- Wrapping Validators in Functions
- Validation Based on Data Attributes of Input Elements
- Common Validators
- Validators as Widget Options
Simple File Size Check
The simplest validatior, which checks file sizes, can look like this,
widget.validators.push(function(fileInfo) {
if (fileInfo.size !== null && fileInfo.size > 1024 * 1024) {
throw new Error("fileMaximumSize");
}
});
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 widgets:
function maxFileSize(size) {
return function(fileInfo) {
if (fileInfo.size !== null && fileInfo.size > size) {
throw new Error("fileMaximumSize");
}
};
}
// limit file size to 1 MB
widget1.validators.push(maxFileSize(1024 * 1024));
// limit file size to 2 MB
widget2.validators.push(maxFileSize(2 * 1024 * 1024));
Validation Based on Data Attributes of Input Elements
Validation can also be implemented based on data attributes of input elements.
For example, if your widget has the data-max-size
option enabled, we can add
the maxFileSize
validatior in the following manner,
$(function() {
$('[role=uploadcare-uploader][data-max-size]').each(function() {
var widget = uploadcare.Widget(this);
widget.validators.push(maxFileSize($(this).data('maxSize')));
});
});
Common Validators
Here are some common validation cases for you to consider,
File Size
The example below shows how to add validation for both min and max file sizes.
A validator is automatically added to each widget with data-min-size
and
data-max-size
custom attributes.
See the Pen File size validation exampleby uploadcare (@uploadcare) on CodePen.
File Type
fileTypeLimit
is another validator that can be added to widgets 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: audio/mpeg
in the example below.
See the Pen File type validation exampleby uploadcare (@uploadcare) on CodePen.
Image Dimensions
For images, you can define the maxDimensions
validator that will be added to
widgets with either data-max-width
or data-max-height
custom attributes.
Please note, 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 behavior.
See the Pen Image dimensions validation exampleby uploadcare (@uploadcare) on CodePen.
Image Orientation
This validator denies landscape images with the data-portrait-only="true"
attribute and portrait images with the data-landscape-only="true"
attribute.
There is no point in adding both of those attributes to the same widget.
See the Pen Image dimensions validation exampleby uploadcare (@uploadcare) on CodePen.
Validators as Widget Options
You can also moderate content via widget options. Such options are called validators. Here are the most common ones:
- Allow images only
- Allow certain input accept types
- Set widget preferred MIME types