Angular Input File als Component auslagern

Tutorial Angular

von Ardian Shala, 15.01.2017 - update: 20.05.2018
Durch das Auslagern von dem File Input in eine eigene Angular Component lässt sich redundanter Code vermeiden.
Zusätzlich ist man in der Lage andere Elemente zu nutzen, die sich stylen lassen was bei dem File Input nur bedingt möglich ist.
Vorraussetzung:
  • Angular - link
  • Visual Studio Code - link

Input File Komponente erstellen

Datei „file-upload“ erstellen:

import { Component, Output, Input, EventEmitter, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'file-upload',
  template: `<input #fileInput [hidden]="true" [multiple]="multiple" [accept]="extensions" type="file" (change)="onDialogOk()" />`
})

export class FileUploadComponent {
  @Input() multiple: boolean;
  @Input() extensions: string;

  @Output() onOk = new EventEmitter<FileList>();

  @ViewChild('fileInput') fileInput: ElementRef;

  click() {
    this.fileInput.nativeElement.value = ""
    this.fileInput.nativeElement.click();
  }

  onDialogOk() {
    this.onOk.emit((this.fileInput.nativeElement as HTMLInputElement).files);
  }
}
  • Input multiple – festlegen, ob Einfach- oder Mehrfachupload erlaubt ist
  • Input extensions – erlaubte Datei Endungen angeben
  • Output onOk – Output Funktion, die eine Funktion der Parent Component triggert
  • ViewChild fileInput – Zugriff auf das Input File über die Variable #fileInput
  • Funktion click – Überschreiben von „click“, Zurücksetzen und triggern von click()
  • Funktion onDialogOk – Funktion, die aufgerufen wird, wenn der Datei Dialog mit „öffnen“ bestätigt wurde

Komponente integrieren

Wir integrieren unsere Komponente über file-upload in unserem Template. Da diese hidden ist, definieren wir zusätzlich einen Button, der beim Click unsere Komponente triggern soll. Die Component lässt sich elegant über eine zugewiesene Variable #f ansprechen.

<file-upload #f (onOk)="onFileLoaded($event)"></file-upload>
<button (click)="f.click()">Datei auswählen</button>

Dateien in Parent Komponente entegennehmen

Wir implementieren die in dem Template angegebene Funktion onFileLoaded, welche unsere Dateien über den Parameter übergibt.

onFileLoaded($event: FileList) {
    console.info($event);
}
#angular #component #fileupload

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.