¿Cómo restablecer el archivo seleccionado con el tipo de archivo de etiqueta de entrada en Angular 9?

Para restablecer el archivo seleccionado con el tipo de archivo de etiqueta de entrada, podemos implementar un método que, al invocarlo, borre el archivo seleccionado.

Acercarse:

• Establezca la identificación de su entrada usando ‘#’ para que sea legible dentro del componente.
• Ahora en el componente podemos usar la directiva ViewChild para leer el valor de la entrada desde la vista HTML.
• Para eso, importa ViewChild desde @angular/core.

import { ViewChild } from '@angular/core';

• ViewChild le permite establecer una variable de referencia para su entrada, con eso puede borrar el valor de la entrada.
• Después de borrar el valor de entrada usando la variable de referencia, el archivo seleccionado se restablecerá.

Ejemplo:

Crearemos un escenario similar, habrá un campo de entrada y la tarea será crear un botón que al hacer clic restablecerá el archivo seleccionado.

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 = "";
  }
}

Producción:

Después de seleccionar el archivo:

Después de presionar el botón Borrar: