File Restrictions

You can restrict the selected files based on predefined rules for their size and/or extension.

When the FileSelect is bound to a model through the ngModel directive, the files which do not correspond to the restrictions will not be added to the model.

Types of File Restrictions

The FileSelect supports three types of file restrictions:

File Extension

You can define the file types that are eligible by using the allowedExtensions property. The files with extensions, which are not included in the list will be displayed as invalid by the FileSelect. The allowedExtensions option recognizes entries of both .type (for example, .docx, .png, .svg, .xls, and others) and type (for example, docx, png, svg, xls, and others) values.

import { Component } from '@angular/core';
import { FileRestrictions } from '@progress/kendo-angular-upload';

@Component({
    selector: 'my-app',
    template: `
        <kendo-fileselect [restrictions]="myRestrictions">
        </kendo-fileselect>
    `
})
export class AppComponent {
    public myRestrictions: FileRestrictions = {
        allowedExtensions: ['.jpg', '.png']
    };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadsModule } from '@progress/kendo-angular-upload';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, HttpClientModule, UploadsModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Maximum File Size

You can restrict the maximum allowed file size (in bytes) by using the maxFileSize property. If the selected file exceeds the maximum size, an error message will be displayed.

import { Component } from '@angular/core';
import { FileRestrictions } from '@progress/kendo-angular-upload';

@Component({
    selector: 'my-app',
    template: `
        <kendo-fileselect [restrictions]="myRestrictions">
        </kendo-fileselect>
    `
})
export class AppComponent {
    public myRestrictions: FileRestrictions = {
        maxFileSize: 4194304
    };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadsModule } from '@progress/kendo-angular-upload';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, HttpClientModule, UploadsModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Minimum File Size

You can restrict the minimum allowed file size (in bytes) by using the minFileSize property. If the selected file is less than the minimum size, an error message will be displayed.

import { Component } from '@angular/core';
import { FileRestrictions } from '@progress/kendo-angular-upload';

@Component({
    selector: 'my-app',
    template: `
        <kendo-fileselect [restrictions]="myRestrictions">
        </kendo-fileselect>
    `
})
export class AppComponent {
    public myRestrictions: FileRestrictions = {
        minFileSize: 1048576
    };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadsModule } from '@progress/kendo-angular-upload';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, HttpClientModule, UploadsModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Browser Limitations

Internet Explorer versions up to and including version 9 provide no information on the file size. As a result, the FileSelect restriction for the minFileSize and maxFileSize options does not work.

In this article