Wie kann ich via Klick auf einen Text den Explorer öffnen?

[Tabula_Rasa]

Hallo zusammen,

Ich habe eine Upload-Funktion implementiert für Ordner:

<div class="footer">
    <input type="file"
           id="file"
           webkitdirectory 
           multiple
           (change)="handleFileInput($event.target.files)">
    <button (click)="uploadFiles()">Upload</button>
</div>

Man würde folgendes auf der Webseite sehen:

Datei auswählen Keine Ausgewählt Upload

Aber anstelle dieses Textes möchte ich einfach Folgendes anzeigen lassen:

Ordner hochladen

Und beim Klicken auf diesen Text soll der Explorer geöffnet werden und ein Ordner soll ausgewählt werden können.
Wie ändere den Text?

 

[jonas3344]

Der File-Input ist recht statisch und wird an sich vom Browser so vorgegeben. Den Text kann man so nicht abändern.

Du müsstest den File-input verstecken und etwas anderes anzeigen, das dann den Fileinput triggert. Gibt auch fertige Plugins dazu. Eine kurze Google-Suche dazu hilft Dir sicher weiter.

 

[Tronjer]

Das Input als Viewchild einbinden und per CSS invis stellen. Über die Referenz Variable lässt sich die Funktion dann aus einer anderen Funktion aufrufen.

<input #filePicker (change)="myFunc($event)">

@ViewChild('filePicker', { static: false }) filePickerRef: ElementRef<HTMLInputElement>;

// Aufruf per
this.filePickerRef.nativeElement.click();