Angular: Open file dialog upon button click

Question

I'm using Angular 8. Upon button click I want to open a file dialog, select a file and then call an event that will handle this file.

Thank you, Zvika

I tried the following code in HTML. But I do not want anything to be displayed in HTML.

HTML

<p-fileUpload name="myfile[]" customUpload="true" auto="true" (uploadHandler)="onOpenFile($event)" accept="application/pdf"></p-fileUpload>

ts

public onOpenFile (event) { }

Answer 1

You can achieve this with normal input tag , you can make it hidden, but at least you need one element to trigger the click event. Check stackblitz

Answer 2

In addition to @Abhinav Kumar's answer regarding Primeng:

  <span pButton label="Import..." icon="pi pi-folder-open" (click)="fileInput.click()">
    <input #fileInput type="file" hidden (change)="doFileInput($event)">
  </span>