Angular – Input File als Component auslagern

Tutorial Angular

von Ardian Shala, 15.01.2017 - update: 23.05.2017
Durch das Auslagern von dem File Input in eine eigene Angular 2 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 2 - 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 FileUpload {
    @Input() multiple: boolean; 
    @Input() extensions: string; 

    @Output() onOk = new EventEmitter&lt;File&gt;(); 

    @ViewChild('fileInput') fileInput: ElementRef;

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

    onDialogOk() {
        this.onOk.emit(this.fileInput.nativeElement.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);
}

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Frontend und Backend Entwickler mit Angular, Ionic und C#.