All Components

Upload Overview

The Upload helps users send files from their file system to a dedicated server handler that is set up to receive them.

Basic Usage

The following example demonstrates the Upload in action.

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

@Component({
  selector: 'my-upload',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl">
  </kendo-upload>
  `
})
export class UploadComponent {
  uploadSaveUrl: string = "saveUrl";
  uploadRemoveUrl: string = "removeUrl";
}
import { Component } from '@angular/core';
import { Response, ResponseOptions } from '@angular/http';
import { MockBackend } from '@angular/http/testing';

@Component({
  selector: 'my-app',
  template: `<my-upload></my-upload>`
})
export class AppComponent {
  constructor(private backend: MockBackend) {
    /*
      Mocked backend service.
      For further details check:
      https://angular.io/docs/ts/latest/api/http/testing/index/MockBackend-class.html
    */
    this.backend.connections.subscribe((c: any) => {
      let response = new Response(<ResponseOptions>{ status: 200 });

      if (c.request.url === "saveUrl") {
        c.mockDownload(response);

        setTimeout(() => {
          c.mockRespond(response);
        }, 1500);
      } else if (c.request.url === "removeUrl") {
        c.mockRespond(response);
      }
    });
  }
}
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Http, HttpModule, ConnectionBackend, BaseRequestOptions,
         Response, ResponseOptions, ResponseType } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { UploadModule } from '@progress/kendo-angular-upload';
import { AppComponent }   from './app.component';
import { UploadComponent }  from './upload.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, HttpModule, UploadModule, BrowserAnimationsModule ],
  declarations: [ AppComponent, UploadComponent ],
  bootstrap:    [ AppComponent ],
  providers: [BaseRequestOptions, MockBackend, {
        provide: Http,
        deps: [MockBackend, BaseRequestOptions],
        useFactory: (backend, options) => {
            return new Http(backend, options);
        }
  }]
})

export class AppModule { }

enableProdMode();

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

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-angular-upload @progress/kendo-angular-l10n @angular/animations
  2. Once installed, import the UploadModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { UploadModule } from '@progress/kendo-angular-upload';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, BrowserAnimationsModule, UploadModule]
    })
    export class AppModule {
    }

Dependencies

The Upload package requires the following peer dependencies that have to be installed by your application:

  • @angular/animations
  • @angular/common
  • @angular/core
  • @angular/forms
  • @angular/http
  • @progress/kendo-angular-l10n
  • rxjs

Features

The Upload delivers the following features:

Events

The Upload emits multiple events in response to user actions and as part of its lifecycle.

The following example demonstrates some common events of the Upload.

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

@Component({
  selector: 'my-upload',
  styles: [`
    >>> .img-preview {
      position: relative;
      padding: 10px;
      top: 20px;
    }
    
    >>> event-log {
      position: relative;
      top: 20px;
    }
  `],
  template: `
      <kendo-upload
        [autoUpload]="false"
        [saveUrl]="uploadSaveUrl"
        [removeUrl]="uploadRemoveUrl"
        [restrictions]="uploadRestrictions"
        (select)="selectEventHandler($event)"
        (clear)="clearEventHandler($event)"
        (remove)="removeEventHandler($event)"
        (complete)="completeEventHandler($event)">
      </kendo-upload>
    
      <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 UploadComponent {
  public events: string[] = [];
  public imagePreviews: string[] = [];
  public uploadRemoveUrl: string = "removeUrl";
  public uploadRestrictions: FileRestrictions = {
    allowedExtensions: [".jpg", ".png"]
  };
  public uploadSaveUrl: string = "saveUrl";

  public clearEventHandler(e: ClearEvent): void {
    this.log("Clearing the file upload");
    this.imagePreviews = [];
  }

  public completeEventHandler() {
    this.log(`All files processed`);
  }

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

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

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

  public selectEventHandler(e: SelectEvent): void {
    let that = this;
    e.files.forEach((file) => {
      that.log(`File selected: ${file.name}`);

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

        reader.onload = function (ev) {
          let image = {
            src: ev.target.result,
            uid: file.uid
          };

          that.imagePreviews.unshift(image);
        };

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

  private log(event: string, arg: any): 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 { Component } from '@angular/core';
import { Response, ResponseOptions } from '@angular/http';
import { MockBackend } from '@angular/http/testing';

@Component({
  selector: 'my-app',
  template: `<my-upload></my-upload>`
})
export class AppComponent {
  constructor(private backend: MockBackend) {
    /*
      Mocked backend service.
      For further details check:
      https://angular.io/docs/ts/latest/api/http/testing/index/MockBackend-class.html
    */
    this.backend.connections.subscribe((c: any) => {
      let response = new Response(<ResponseOptions>{ status: 200 });

      if (c.request.url === "saveUrl") {
        c.mockDownload(response);

        setTimeout(() => {
          c.mockRespond(response);
        }, 1500);
      } else if (c.request.url === "removeUrl") {
        c.mockRespond(response);
      }
    });
  }
}
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Http, HttpModule, ConnectionBackend, BaseRequestOptions,
         Response, ResponseOptions, ResponseType } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { UploadModule } from '@progress/kendo-angular-upload';
import { AppComponent }   from './app.component';
import { UploadComponent }  from './upload.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { EventLogComponent }   from './event-log.component';

@NgModule({
  imports:      [ BrowserModule, HttpModule, UploadModule, BrowserAnimationsModule ],
  declarations: [ AppComponent, UploadComponent, EventLogComponent ],
  bootstrap:    [ AppComponent ],
  providers: [BaseRequestOptions, MockBackend, {
        provide: Http,
        deps: [MockBackend, BaseRequestOptions],
        useFactory: (backend, options) => {
            return new Http(backend, options);
        }
  }]
})

export class AppModule { }

enableProdMode();

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