File validation

Validator is just a function that receives fileInfo object for each uploaded file and should throw exception if file does not meet requirements. The simplest validatior can look like this:

widget.validators.push(function(fileInfo) {
  if (fileInfo.size !== null && fileInfo.size > 1024 * 1024) {
    throw new Error("fileMaximumSize");
  }
});

It is better to wrap validators in function which receives all constants. Such validators can be reused with different Uploading 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));

Another step that can be taken is automatic validation based on data attributes of input element. For example if widget has data-max-size, maxFileSize validatior can be added.

$(function() {
  $('[role=uploadcare-uploader][data-max-size]').each(function() {
    var widget = uploadcare.Widget(this);
    widget.validators.push(maxFileSize($(this).data('maxSize')));
  });
});

There are some common validation cases which you may want.

Limit File Size

This example shows how to add validation for both minimal and maximal file size. Validator will be automatically added to each widget with custom attributes data-min-size and data-max-size.

Restrict File Type

fileTypeLimit is another validator which is added to Uploading Widgets with data-file-types attribute. Value is space-separated list of allowed files extensions.

Image Dimensions

For images you can define maxDimensions validator which will be added to Uploading Widgets with data-max-width or data-max-height attributes. Please note that maxDimensions checks dimensions only for images and accepts files that are not images. It can be combined with data-images-only attribute to change this.

Image Orientation

This validator will deny landscape images with data-portrait-only="true" attribute and portrait images with data-landscape-only="true" attribute. There is no sense in setting both attributes on same widget.