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. The Upload package is published on the Progress NPM Registry. To set up your access, follow the steps in the article on getting started.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-upload @progress/kendo-angular-l10n @angular/animations
  3. 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