Getting Started with the Kendo UI for Angular FileSelect

The FileSelect helps users select single or multiple files from their file systems.

It is a richer version of an <input type='file'> element and supports model binding, templates, forms and more.

Basic Usage

The following example demonstrates the FileSelect in action.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-fileselect></kendo-fileselect>
    `
})
export class AppComponent {}

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);

Functionality and Features

Events

The following example demonstrates the FileSelect events in action.

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

@Component({
    selector: 'my-app',
    styles: [`
        .img-preview {
            position: relative;
            padding: 10px;
            top: 20px;
        }

        event-log {
            position: relative;
            top: 20px;
        }
    `],
    template: `
        <kendo-fileselect
            [restrictions]="fileRestrictions"
            (select)="selectEventHandler($event)"
            (remove)="removeEventHandler($event)">
        </kendo-fileselect>

        <event-log title="Event log" [events]="events"></event-log>

        <div *ngIf="imagePreviews.length" class="img-preview example-config">
            <h3>Preview selected images</h3>
            <img *ngFor="let image of imagePreviews"
            [src]="image.src"
            alt="image preview"
            style="width: 200px; margin: 10px;" />
        </div>
    `
})
export class AppComponent {
    public events: string[] = [];
    public imagePreviews: any[] = [];

    public fileRestrictions: FileRestrictions = {
      allowedExtensions: ['.jpg', '.png']
    };

    public removeEventHandler(e: RemoveEvent): void {
        this.log(`Removing ${e.files[0].name}`);

        const index = this.imagePreviews.findIndex(item => item.uid === e.files[0].uid);

        if (index >= 0) {
        this.imagePreviews.splice(index, 1);
        }
    }

    public selectEventHandler(e: SelectEvent): void {
        const that = this;

        e.files.forEach((file) => {
        that.log(`File selected: ${file.name}`);

        if (!file.validationErrors) {
            const reader = new FileReader();

            reader.onload = function (ev) {
            const image = {
                src: ev.target['result'],
                uid: file.uid
            };

            that.imagePreviews.unshift(image);
            };

            reader.readAsDataURL(file.rawFile);
        }
        });
    }

    private log(event: string): void {
        this.events.unshift(`${event}`);
    }
}
import { Component, Input } from '@angular/core';

@Component({
    selector: 'event-log',
    template: `
        <div class="example-config">
        <h5>{{ title }}</h5>
        <ul class="event-log">
            <li *ngFor="let event of events">{{ event }}</li>
        </ul>
        </div>
    `
})
export class EventLogComponent {
    @Input() title: string;
    @Input() events: string[];
}
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 { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';

@NgModule({
  imports: [BrowserModule, HttpClientModule, UploadsModule, BrowserAnimationsModule],
  declarations: [AppComponent, EventLogComponent],
  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);

In this article