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

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

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

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

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,
    });

Можете ли вы уточнить, когда вы говорите, что при повторном нажатии не остается следов последнего файла, что вы имеете в виду? Где последний файл должен быть не виден?

Ashish Ranjan 20.04.2019 21:34

Вы хотите, чтобы тест "wrong.png" исчез после того, как ваш пост будет готов?

Ashish Ranjan 20.04.2019 21:36
Этот поможет, он отлично работает для каждого отдельного сценария.
Prashant Pimpale 21.04.2019 07:27

Обратная связь по добавленным ответам, заданным комментариям всегда приятна и весела.

Ashish Ranjan 24.04.2019 15:44
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
4
204
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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
  });
}

Другие вопросы по теме