External DropZone

The External DropZone helps users to drag and drop files from their file systems to a dedicated user interface. It can be implemented either by using the External DropZone Component, or by adding the External DropZone Directive to an element.

DropZone Component

The DropZone Component is a drag and drop tool. To link the external DropZone to the FileSelect, provide matching IDs to the zoneId options of the DropZone and the FileSelect components.

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

const photosUrl = 'https://www.telerik.com/kendo-angular-ui-develop/components/uploads/assets/';
const fillMyFiles = (count: number): Array<FileInfo> => {
  const files = [];
  for (let i = 0; i < count; i++) {
    files.push(
      {
        name: `${i}.png`,
        src: `${photosUrl}${i}.png`
      }
    );
  }
  return files;
};

@Component({
    selector: 'my-app',
    styleUrls: ['styles.css'],
    encapsulation: ViewEncapsulation.None,
    template: `
      <div class="dropzone-wrapper">
        <div class="fileselect-wrapper">
          <kendo-uploaddropzone zoneId="myZone">
            Only JPEG and PNG files are allowed.
          </kendo-uploaddropzone>
          <kendo-fileselect
            zoneId="myZone"
            (select)="onSelect($event)"
            (remove)="onRemove($event)"
            [restrictions]="myRestrictions"
            [showFileList]="false"
            >
          </kendo-fileselect>
        </div>
        <div class="images-wrapper">
          <div class="file-image" *ngFor="let image of myFiles">
              <img [src]="image.src" [alt]="image.name" />
          </div>
        </div>
      </div>
  `
})
export class AppComponent {
  public photosCount = 8;
  public myFiles = fillMyFiles(this.photosCount);

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

  public onSelect(ev: SelectEvent): void {
    if (this.myFiles && ev.files) {
      ev.files.forEach((file: FileInfo) => {
        if (file.rawFile && !file.validationErrors) {
          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);
    });
  }
}
.dropzone-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 420px;
}

.upload-wrapper, .fileselect-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 375.2px;
}

kendo-uploaddropzone {
  margin: 0 8px;
  flex-grow: 1;
}

kendo-upload, kendo-fileselect {
  margin: 8px 8px 0 8px;
}

.images-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-content: start;
  column-gap:10px;
  row-gap: 10px;
  border: 1px solid;
  border-color: #EBEBEB;
  padding:10px;
}

.file-image {
  width: 110px;
  height: 110px;
  align-self: flex-start;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  display:flex;
  flex-direction: column;
}
.custom-dropzone {
  border: 1px solid;
  border-color: #EBEBEB;
  margin: 8px;
  height: 200px;
}

.custom-dropzone p {
  margin: 10px;
}
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);

DropZone Directive

The DropZone Directive allows you to create custom elements with a drag and drop FileSelect functionality. To link the custom element with the FileSelect, provide matching IDs to the kendoFileSelectDropZone directive and the FileSelect zoneId option.

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

@Component({
    selector: 'my-app',
    template: `
      <div class="wrapper">
          <div class="custom-dropzone" [kendoUploadDropZone]="'myZone'">
            <p>Drop files here...</p>
          </div>
          <kendo-fileselect
            zoneId="myZone"
            >
          </kendo-fileselect>
      </div>
  `,
  styleUrls: ['styles.css']
})
export class AppComponent {}
.dropzone-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 420px;
}

.upload-wrapper, .fileselect-wrapper {
  display: flex;
  flex-direction: column;
  max-width: 375.2px;
}

kendo-uploaddropzone {
  margin: 0 8px;
  flex-grow: 1;
}

kendo-upload, kendo-fileselect {
  margin: 8px 8px 0 8px;
}

.images-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-content: start;
  column-gap:10px;
  row-gap: 10px;
  border: 1px solid;
  border-color: #EBEBEB;
  padding:10px;
}

.file-image {
  width: 110px;
  height: 110px;
  align-self: flex-start;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  display:flex;
  flex-direction: column;
}
.custom-dropzone {
  border: 1px solid;
  border-color: #EBEBEB;
  margin: 8px;
  height: 200px;
}

.custom-dropzone p {
  margin: 10px;
}
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);

In this article