В Angular, как очистить текстовое поле загрузки файла после загрузки файла

Для простоты мы можем использовать ссылочную переменную шаблона #input в html, чтобы передать ссылку на элемент в функцию и очистить значение, используя input.value = null

Для простоты я удалил вызовы API и заменил их на of(true) для макетирования и вызова API!

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { of } from 'rxjs';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div class = "row">
        <div class = "mb-6">
            <label class = "form-label" for = "defaultFile">Upload file</label>
            <input type = "file" class = "form-control" id = "defaultFile" (change) = "onChange($event)" #input>
            <hr>
            <button type = "button" class = "btn btn-outline-theme" (click) = "uploadFile(input)">Upload</button>
      </div>
    </div>
  `,
})
export class App {
  fileToUpload: File | null = null;

  constructor() {}

  onChange(event: any) {
    this.fileToUpload = event.target.files[0];
  }

  uploadFile(input: any) {
    if (!this.fileToUpload) {
      alert('No file selected.');
      return;
    }

    const formData: FormData = new FormData();
    formData.append('file', this.fileToUpload, this.fileToUpload.name);

    return of(true).subscribe(
      (response: any) => {
        console.info(response);
        input.value = null; // <- changed here!
      },
      (error: any) => {
        console.error(error);
      }
    );
  }
}

bootstrapApplication(App);

Демо-версия Stackblitz

если вы используете реактивные формы, вы можете использовать этот фрагмент кода:

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
  <div>
    <input type = "file" name = "test" id = "test" [formControl] = "test" />
    <button type = "submit" (click) = "onSubmit()">submit</button>
  </div>
 `,
})
export class TestComponent {
 test: FormControl = new FormControl();

 onSubmit() {
  // submit logic ....

    this.test.reset();
 }
}