Skip to content
Related Articles

Related Articles

How to reset selected file with input tag file type in Angular 9?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 28 Sep, 2022
View Discussion
Improve Article
Save Article

To reset the selected file with input tag file type, we can implement a method which on invocation will clear the selected file.


  • Set the id of your input using ‘#’ to make it readable  inside the component.
  • Now in the component we can use ViewChild directive to read the value of the input from the HTML view.
  • For that, import ViewChild from @angular/core.
import { ViewChild } from "@angular/core";
  • ViewChild allows you to set a reference variable to your input, using that you can clear the value of input.
  • After clearing the value of input using the reference variable, the selected file will be reset.


We will create a similar scenario, there will be an input field and the task will be to create a button which on click will reset the selected file.


import { Component,ViewChild,ElementRef } from "@angular/core";
  selector: "app-root",
  template: `
  <div style="text-align: center;">
  <input #takeInput type="file" name="filename">
  <!--After clicking this button the file should be reset.-->
  <button (click)="reset()">Clear</button>
  styleUrls: []
export class AppComponent {
  title = "Tutorial";
  // ViewChild is used to access the input element.
  @ViewChild("takeInput", {static: false})
  // this InputVar is a reference to our input.
  InputVar: ElementRef;
    // We will clear the value of the input
    // field using the reference variable.
    this.InputVar.nativeElement.value = "";


After selecting the file:

After pressing clear button:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!