All Components

File Processing

The Upload provides configuration options for controlling the way it processes the desired files for upload.

These options are:

Automatic Upload of Files

The Upload allows the immediate upload of selected files through the default configuration of its autoUpload option to true. If you set autoUpload to false, the upload will occur only when explicitly confirmed by the user through a button-click.

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

@Component({
  selector: 'my-upload',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    [autoUpload]="false">
  </kendo-upload>
  `
})
export class UploadComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";
}
import { Component, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpProgressEvent, HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/delay';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/concat';

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

@Injectable()
export class UploadInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === "saveUrl") {
      let events: Observable<HttpEvent<any>>[] = [0, 30, 60, 100].map((x) => Observable.of(<HttpProgressEvent>{
        type: HttpEventType.UploadProgress,
        loaded: x,
        total: 100
      }).delay(1000));

      const success = Observable.of(new HttpResponse({ status: 200 })).delay(1000);
      events.push(success);

      return Observable.concat(...events);
    }

    if (req.url === "removeUrl") {
        return Observable.of(new HttpResponse({ status: 200 }));
    }

    return next.handle(req);
  }
}
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadModule } from '@progress/kendo-angular-upload';
import { AppComponent }   from './app.component';
import { UploadComponent }  from './upload.component';
import { UploadInterceptor } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, HttpClientModule, UploadModule, BrowserAnimationsModule ],
  declarations: [ AppComponent, UploadComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UploadInterceptor,
      multi: true
    }
  ]
})

export class AppModule { }

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Upload of Single or Multiple Files

The Upload allows the selection of multiple files through the default configuration of its multiple option to true. If you set multiple to false, the selection of files will be limited to a single file.

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

@Component({
  selector: 'my-upload',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    [multiple]="false">
  </kendo-upload>
  `
})
export class UploadComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";
}
import { Component, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpProgressEvent, HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/delay';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/concat';

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

@Injectable()
export class UploadInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === "saveUrl") {
      let events: Observable<HttpEvent<any>>[] = [0, 30, 60, 100].map((x) => Observable.of(<HttpProgressEvent>{
        type: HttpEventType.UploadProgress,
        loaded: x,
        total: 100
      }).delay(1000));

      const success = Observable.of(new HttpResponse({ status: 200 })).delay(1000);
      events.push(success);

      return Observable.concat(...events);
    }

    if (req.url === "removeUrl") {
        return Observable.of(new HttpResponse({ status: 200 }));
    }

    return next.handle(req);
  }
}
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadModule } from '@progress/kendo-angular-upload';
import { AppComponent }   from './app.component';
import { UploadComponent }  from './upload.component';
import { UploadInterceptor } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, HttpClientModule, UploadModule, BrowserAnimationsModule ],
  declarations: [ AppComponent, UploadComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UploadInterceptor,
      multi: true
    }
  ]
})

export class AppModule { }

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Upload of Batches of Files

The Upload allows the upload of the selected files in separate requests through the default configuration of its batch option to false. If you set batch to true, all selected files will be uploaded in a single request.

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

@Component({
  selector: 'my-upload',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    [batch]="true">
  </kendo-upload>
  `
})
export class UploadComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";
}
import { Component, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpProgressEvent, HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/delay';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/concat';

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

@Injectable()
export class UploadInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === "saveUrl") {
      let events: Observable<HttpEvent<any>>[] = [0, 30, 60, 100].map((x) => Observable.of(<HttpProgressEvent>{
        type: HttpEventType.UploadProgress,
        loaded: x,
        total: 100
      }).delay(1000));

      const success = Observable.of(new HttpResponse({ status: 200 })).delay(1000);
      events.push(success);

      return Observable.concat(...events);
    }

    if (req.url === "removeUrl") {
        return Observable.of(new HttpResponse({ status: 200 }));
    }

    return next.handle(req);
  }
}
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadModule } from '@progress/kendo-angular-upload';
import { AppComponent }   from './app.component';
import { UploadComponent }  from './upload.component';
import { UploadInterceptor } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, HttpClientModule, UploadModule, BrowserAnimationsModule ],
  declarations: [ AppComponent, UploadComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: UploadInterceptor,
      multi: true
    }
  ]
})

export class AppModule { }

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article