從 que 中刪除后，ng2 文件上傳不允許我添加相同的文檔

Question

我在使用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，然后重新讀取它，這是允許的並且有效。 如果隊列不為空，似乎是允許的。 但是，如果隊列為空，我將無法重新添加我嘗試添加的最后一個文件！

CONCERN - 我知道我可以使用“clearQueue()”重置隊列，但如果我有其他項目，它們都會被刪除，所以我不想要那樣。

Answer 1

起初我以為這是 ng2-file-upload 的問題，其實不是！ 是輸入文件的問題...

我在我的輸入中添加了一個事件，它解決了它。

 onFileClick(event) { event.target.value = ''; } <input (click)="onFileClick($event)" />

Answer 2

我可以通過以下方式解決它

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