Angular Input File als Component auslagern

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