Process Files Locally

The Upload enables you to simulate the file-upload success by using the HttpInterceptor and process the files entirely on the client.

The following sample project uses the Upload component to create an image gallery and processes the selected files locally.

Configuring the Custom Interceptor

Create a custom service that implements the intercept method from the Angular HttpInterceptor interface and returns success.

@Injectable()
export class UploadInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === 'saveUrl') {
      const success = of(new HttpResponse({ status: 200 }));
      return success;
    }

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

    return next.handle(req);
  }
}

Configuring the Upload

  1. Configure the Upload component to handle the select event. Optionally, provide an array of file-like objects as the initial state of "selected" files. For more information on rendering initial files, refer to this article.

    <kendo-upload
       [saveUrl]="uploadSaveUrl"
       [removeUrl]="uploadRemoveUrl"
       (select)="onSelect($event)"
       (remove)="onRemove($event)"
       [restrictions]="myRestrictions"
       [ngModel]="myFiles">
       <kendo-upload-messages select="Add images"></kendo-upload-messages>
    </kendo-upload>
  2. Process the selected files in the select event handler by using the FileReader API. To optionally allow the removing of selected files, utilize the remove event handler.

    uploadSaveUrl = 'saveUrl'; // Has to represent an actual API endpoint.
    uploadRemoveUrl = 'removeUrl'; // Has to represent an actual API endpoint.
    
    myRestrictions = [{
       allowedExtensions: ['jpg', 'png']
    }];
    
    public myFiles: any[] = [{
       name: 'three.jpg',
       src: 'https://demos.telerik.com/kendo-ui/content/web/foods/3.jpg',
       size: 1000,
       uid: 1
       }, {
       name: 'two.jpg',
       src: 'https://demos.telerik.com/kendo-ui/content/web/foods/2.jpg',
       size: 2000,
       uid: 2
       }];
    
    public onSelect(ev: SelectEvent): void {
       ev.files.forEach((file: FileInfo) => {
       if (file.rawFile) {
           const reader  = new FileReader();
    
           reader.onloadend = () => {
           this.myFiles.push({...file, src: <string>reader.result});
           };
    
           reader.readAsDataURL(file.rawFile);
       }
       });
    }
    
    public onRemove(ev: RemoveEvent): void {
       ev.files.forEach((file: FileInfo) => {
       this.myFiles = this.myFiles.filter(f => f.uid !== file.uid);
       });
    }
  3. Display the selected images on the page by using a custom API.

    <img *ngFor="let image of myFiles" height='100' style="margin: 5px; border: 1px solid gray;" [src]="image.src" />

The following example demonstrates the full implementation of the suggested approach.

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

@Component({
  selector: 'my-upload',
  template: `
  <kendo-upload
    [saveUrl]="uploadSaveUrl"
    [removeUrl]="uploadRemoveUrl"
    (select)="onSelect($event)"
    (remove)="onRemove($event)"
    [restrictions]="myRestrictions"
    [ngModel]="myFiles">
    <kendo-upload-messages select="Add images"></kendo-upload-messages>
  </kendo-upload>
  <img *ngFor="let image of myFiles" height='100' style="margin: 5px; border: 1px solid gray;" [src]="image.src" />
  `
})
export class UploadComponent {
  public uploadSaveUrl = 'saveUrl'; // Has to represent an actual API endpoint.
  public uploadRemoveUrl = 'removeUrl'; // Has to represent an actual API endpoint.

  public myRestrictions: any[] = [{
    allowedExtensions: ['jpg', 'png']
  }];

  public myFiles: any[] = [{
      name: 'three.jpg',
      src: 'https://demos.telerik.com/kendo-ui/content/web/foods/3.jpg',
      size: 1000,
      uid: 1
    }, {
      name: 'two.jpg',
      src: 'https://demos.telerik.com/kendo-ui/content/web/foods/2.jpg',
      size: 2000,
      uid: 2
    }];

  public onSelect(ev: SelectEvent): void {
    ev.files.forEach((file: FileInfo) => {
      if (file.rawFile) {
        const reader  = new FileReader();

        reader.onloadend = () => {
          this.myFiles.push({...file, src: <string>reader.result});
        };

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

  public onRemove(ev: RemoveEvent): void {
    ev.files.forEach((file: FileInfo) => {
      this.myFiles = this.myFiles.filter(f => f.uid !== file.uid);
    });
  }
}
import { Component, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable, of } from 'rxjs';

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

/*
  Mocked backend service.
  For further details, check
  https://angular.io/guide/http#writing-an-interceptor.
*/

@Injectable()
export class UploadInterceptor implements HttpInterceptor {
  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === 'saveUrl') {
      const success = of(new HttpResponse({ status: 200 }));
      return success;
    }

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

    return next.handle(req);
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UploadModule } from '@progress/kendo-angular-upload';
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';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

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

  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