To reset the selected file with input tag file type, we can implement a method which on invocation will clear the selected file.
Approach:
- 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.
Example:
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.
Javascript
import { Component,ViewChild,ElementRef } from "@angular/core" ;
@Component({ selector: "app-root" ,
template: `
<div style= "text-align: center;" >
<h1>
{{title}}
</h1>
<input #takeInput type="file" name="filename">
<!--After clicking this button the file should be reset.-->
<button (click)= "reset()" >Clear</button>
</div>
`,
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;
reset()
{
// We will clear the value of the input
// field using the reference variable.
this .InputVar.nativeElement.value = "" ;
}
} |
Output:
After selecting the file:
After pressing clear button: