In this short post, I will show how to reset the selected file with the input tag file type in Angular 9. The usage of file input in HTML is more common. It is always good to reset or clear the selected files after a successful process of the file on the server-side.

Input File: HTML Code for Angular 9

<form [formGroup]="form">
  <div class="form-group">
    <label for="file"></label>
    <input type="file" #fileInput formControlName="fileContact" id="file" required
      (change)="handleFileInput($event.target.files)">
    <button type="button" class="btn btn-info" (click)="clearSelection()">Clear</button>
  </div>
</form>

Now by using the template variable "fileInput", we can access the HTML element to clear the files.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

 @ViewChild('fileInput', {static: false})
  myFileInput: ElementRef;

Import ViewChild and ElementRef to support this functionality.

Using this template variable, clear the files.

this.myInputVariable.nativeElement.value = '';

Related Post

Looking for a complete example? read this post How to upload a file from Angular 9 with .NET Core Web API

Reference

Read more on Template syntax

Conclusion

In this post, I showed how to reset the selected file with the input tag file type in Angular 9. That’s all from this post. If you have any questions or just want to chat with me, feel free to leave a comment below.