Загрузка файла ng2 не позволяет мне добавить тот же документ после того, как я удалил его из очереди

У меня небольшая проблема с ng2-file-upload. Я пытаюсь чтобы пользователь не мог загружать/использовать один и тот же файл дважды. То есть добавить тот же файл в очередь, но еще не загрузить его).

Так что я могу добавить такой документ

this.uploader = new FileUploader({
  url: this.baseUrl + 'claim/document/' + this.claim.id,
  authToken: 'Bearer ' + localStorage.getItem('token'),
  // allowedMimeType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'],
  maxFileSize: 15 * 1024 * 1024, // 15 MB
  // headers: [{name:'Accept', value:'application/json'}],
  isHTML5: true,
  autoUpload: false,
});

this.uploader.onAfterAddingFile = fileItem => {
  fileItem.withCredentials = false;
  let docExists = false;
  for (const doc of this.claim.data.generalDocumentDto) {
    if (fileItem.file.name === doc.fileName) {
      docExists = true;
      this.alertService.warning('Document table already contains a file with name ' + fileItem.file.name);
      // this.uploader.clearQueue();
      this.uploader.removeFromQueue(fileItem);
      break;
    }
  }

  if (!docExists) {
    // do some other stuff
  }


};
<input type="file" #fileInput ng2FileSelect [uploader]="uploader" hidden/>
<button type="button" class="btn btn-primary" (click)="fileInput.click()">Upload File</button>

а затем я могу удалить его из очереди, как это, что, похоже, работает (я не вижу его в очереди) после вызова «removeFromQueue()»

for (const fileItem of this.uploader.queue) {
  if (this.claimDocumentFileName === fileItem.file.name) {
    this.uploader.removeFromQueue(fileItem);
    break;
  }
}

Но если я попытаюсь добавить его снова, откроется окно загрузки файлов, я выберу тот же файл, дважды нажму на него, а затем ничего не происходит!

Он не вызывает «onAfterAddingFile()», и если я смотрю в очередь, его там нет.

ВОПРОС. Есть ли что-то еще, что мне нужно сделать, чтобы разрешить загрузчику снова загружать этот же файл?

Я понимаю, что природа по умолчанию позволит мне добавлять один и тот же файл несколько раз, что я предотвращаю с помощью моей проверки onAfterAddingFile().

НЕЧЕТНОЕ ПОВЕДЕНИЕ. Если я добавлю первый файл ex. file1.txt, затем второй файл file2.txt, затем удалите file1.txt, затем прочитайте его, это разрешено и работает. Кажется, что это разрешено, если очередь не пуста. Но если очередь пуста, я не могу повторно добавить последний файл, который я пытался добавить!

ПРОБЛЕМА. Я знаю, что могу сбросить очередь с помощью 'clearQueue()', но если у меня есть другие элементы, все они будут удалены, поэтому я этого не хочу.


javascript angular html ng2-file-upload
person user1186050    schedule 23.01.2020    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Сначала я подумал, что это проблема с загрузкой файла ng2, но это не так! Это проблема с входным файлом...

Я добавил событие в свой ввод, и оно решило его.

onFileClick(event) {
  event.target.value = '';
}

<input (click)="onFileClick($event)" />

person user1186050    schedule 23.01.2020

arrow_upward
0
arrow_downward

Я мог бы решить это следующим образом

this.uploader.onAfterAddingFile = (item) => {
            item.remove();
            if (this.uploader.queue.filter(f => f._file.name == item._file.name).length == 0) {
                this.uploader.queue.push(item);
            } else {
                alert("file duplicated");
            }
        };
person JonaSosa    schedule 18.06.2020