Как стереть данные формы после загрузки

Question

У меня есть метод загрузки, который отлично работает, но я пытаюсь изменить его так, чтобы после завершения загрузки данные формы были удалены. В частности, я пытаюсь избавиться от имени файла после загрузки (неправильный .png), но я хочу убедиться, что, если я нажму кнопку загрузки еще раз, не останется следов последнего файла.

Я пытался использовать formData.reset () и установить file = null в угловых значениях, но ни один из них не работал.

HTML

<h1>Upload new file (.png or .jpg)</h1>
<input #file type="file" multiple (change)="upload(file.files)" />

Угловая

upload(files) {
    if (files.length === 0)
        return;

    const formData = new FormData();

    for (let file of files) {
        formData.append(file.name, file);
    }
    const uploadReq = new HttpRequest('POST', `/api/FileUpload`, formData, {
        reportProgress: true,
    });

Answer 1

Если вы хотите, чтобы выбранный файл исчез после выполнения вашего запроса POST, установите значение типа ввода файла как null.Вы можете передать свою наблюдаемую и использовать tap() для достижения этой цели.

@ViewChild('file') file;
upload(files) {
  if (files.length === 0)
      return;

  const formData = new FormData();

  for (let file of files) {
      formData.append(file.name, file);
  }
  const uploadReq = new HttpRequest('POST', `/api/FileUpload`, formData, {
      reportProgress: true,
  }).pipe(tap(_ => {
    this.file.nativeElement.value = null
  });
}