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);
  }
}

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. Full Stack Entwickler mit Angular, Ionic, PreactJs, C# und PHP