Content Moderation

• This is for the version 3.x of the widget. If you're looking for the widget v2 docs, check here
• Here’s how you migrate from v2 to v3.

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
  • File Size
  • File Type
  • Image Dimensions
  • Image Orientation
• 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,

• Limit File Size
• Restrict File Type
• Image Dimensions
• Image Orientation

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.

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.

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.

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.

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