All Components

Validation

The files that the user selects for upload can be validated against predefined rules for size and/or extension.

Types of Validation

The Upload supports three types of file validation:

File Extension

You can define the file types that are eligible for upload by setting the allowedExtensions property. If the user tries to select a file with an extension that is not included in the array, the validation will fail. The allowedExtensions option recognizes entries of both .type and type values.

@Component({
  selector: 'my-app',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    [validation]="uploadValidation"
  ></kendo-upload>
  `
})
class AppComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";

  uploadValidation: FileValidation = {
    allowedExtensions: [".jpg", ".png"]
  };
}

Maximum File Size

To define the maximum allowed size (in bytes) of a file intended for upload to the server, set the maxFileSize property. If the selected file exceeds the maximum size, a validation error message will be displayed.

@Component({
  selector: 'my-app',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    [validation]="uploadValidation"
  ></kendo-upload>
  `
})
class AppComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";

  uploadValidation: FileValidation = {
    maxFileSize: 4194304
  };
}

Minimum File Size

To define the minimum allowed size (in bytes) of a file intended for upload to the server, set the minFileSize property. If the selected file is less than the minimum size, a validation error message will be displayed.

@Component({
  selector: 'my-app',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    [validation]="uploadValidation"
  ></kendo-upload>
  `
})
class AppComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";

  uploadValidation: FileValidation = {
    minFileSize: 1048576
  };
}

Browser Limitations

Internet Explorer versions prior to version 9 provide no information on the file size. As a result, the Upload validation for the minFileSize and maxFileSize options will not work as expected.

In this article