How to remove selected file name at input type=“file” by function in angular 4?

Question

I'm new to Angular. I'm using below code to attach file from folder,

   <input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>

After selecting specific file the UI looks like the attached image

Now i'm trying to remove the selected file name with the default text "No file chosen" next of Choose File button like this image, when clicking some button

Can anyone suggest me an idea to achieve this? Thanks in advance.

Answer 1

Just reset the value to empty for that element. Like below -

<input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>
<button type="button" (click)="reset(fileInput)">Reset</button>

reset(element) {
    element.value = "";
}

Working Example