javascript - Datei-Explorer beim Klick auf das Symbol öffnen

Ich benutze Angular 5 mit Typescript. Ich muss das Datei-Explorer-Fenster öffnen, um beim Klicken auf ein Symbol einen Anhang hinzuzufügen. Jetzt weiß ich, wie man das für eine Schaltfläche macht, aber irgendwie scheint es bei einem Symbol nicht zu funktionieren, vielleicht funktioniert die Klick-Ereignisbindung nicht. Bitte ein wenig Hilfe?

<input type="file" #file (change)="upload()"/>
<span class="icon-doc" (click)="file.click()">
</span>

Und in meiner Komponente :

upload(){
    //The functionality to upload file(s)
}

Antwort #1

Ich bin mir nicht genau sicher, wie Ihr Code geschrieben ist, aber Sie müssen dieses Symbol an eine Klick-Methode binden, die tatsächlich das andere input-Element programmgesteuert anklickt, das das Anhängen von Dateien behandelt. Dies ist eine Möglichkeit, wie Sie es machen können:

<a (click)="handleClick()" href="javascript:undefined">
  <i class="la la-upload"></i>
</a>

<input class="hidden" type="file" id="upload-file" name="upload-file" accept=".csv" ngf-max-size="2MB" (change)="addAttachment($event)">

Sie werden wahrscheinlich den Eingabeknopf mit CSS verstecken wollen:

.hidden {
  visibility: hidden;
  width: 1px;
  height: 1px;
}

Und in deiner component.ts,

handleClick() {
  document.getElementById('upload-file').click();
}

addAttachment(fileInput: any) {
  const fileReaded = fileInput.target.files[0];
  //  handle the rest 
}