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

Posting only if it helps someone

In my case, I wanted to upload the same file twice. Other than that everything was working fine according to this example.

To upload the same file twice you need to clear the value of input after selecting a file. Like in the example below

Stackblitz example

Answer 3

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>