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

See the Pen Limit file size exampleby uploadcare (@uploadcare) on CodePen.

Restrict File Type

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

See the Pen Restrict file type exampleby uploadcare (@uploadcare) on CodePen.

Image Dimensions

For images you can define maxDimensions validator which will be added to 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.

See the Pen Image dimensions exampleby uploadcare (@uploadcare) on CodePen.

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.

See the Pen Image orientation exampleby uploadcare (@uploadcare) on CodePen.

Questions?

We’re always happy to help with code, integration, and other stuff.
Search our site for more info or post your question in our Community Area.