How to reset `<input type = "file">` in Angular

javascript

form-control-methods

angular-forms

file-input-reset

byAnton Shumikhin·Nov 6, 2024

A quick and direct way to reset an Angular <input type="file"> is setting the value property to null via the element's reference, which can be neatly accessed with Angular's @ViewChild.

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

@Component({
  template: `<input type="file" #fileInput>`
})
export class MyComponent {
  @ViewChild('fileInput') fileInput;

  resetInput() {
    // Unraveling the mystery of forgotten uploads
    this.fileInput.nativeElement.value = null;
  }
}

Call resetInput(), and poof! Your file input is as empty as if it never existed. Using @ViewChild is like having a magic wand that can tweak the native element itself, effectively resetting the file input.

Resetting input within forms

When dealing with a form that contains the file input, Angular provides form control methods that can simplify the reset process, keeping your code DRY and clean.

<form #myForm="ngForm">
  <input type="file" name="fileInput" ngModel #fileInput>
  <button type="button" (click)="resetForm(myForm)">Reset all my secrets</button>
</form>

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html'
})
export class MyComponent {
  @ViewChild('myForm') myForm;

  resetForm(form) {
    // Zeroing all inputs, stealth mode activated
    form.resetForm();
  }
}

This approach provides a more consistent behavior across different browsers, saving you from the quirks of some (looking at you, Safari).

Considerations for specific conditions

There are times when you need to assess the environment and adapt. Let's see some noteworthy cases:

Angular's form.reset

When using Angular's form.reset(), a convenient method especially when dealing with multiple inputs, make sure you are already harnessing Angular's data binding capabilities for more efficient code.