I'm having a little issue with ng2-file-upload I'm trying to prevent the user from uploading/using the same file twice. Meaning, adding the same file to the queue but not uploading it yet).

So I can add a doc like this

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>

I'm having a little issue with ng2-file-upload I'm trying to prevent the user from uploading/using the same file twice. Meaning, adding the same file to the queue but not uploading it yet).

So I can add a doc like this

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>

and then I can remove it from the queue like this, which seems to work (I don't see it in the queue) after 'removeFromQueue()' is called

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

But if I try and add it again the file uploader window opens up, I select the same file, click on it twice, and then nothing happens!

It doesn't trigger 'onAfterAddingFile()' and if I look in the queue, it's not there.

QUESTION - is there something else I need to do to tell the uploader to allow this same file to be uploaded again?

I understand the default nature will allow me to add the same file multiple times, which I'm preventing through my 'onAfterAddingFile()' check

ODD BEHAVIOR - If I add the first file ex. file1.txt, then a second file file2.txt, then remove file1.txt, then re ad it, this is allowed and works. It seems like it is allowed if the queue isn't empty. But if the queue is empty I can't re add the last file I tried to add!

CONCERN - I know I can reset the queue with 'clearQueue()' but if I have other items they will all be removed, so I don't want that.

• javascript
• html
• angular
• ng2-file-upload

2 Answers 2

At first I thought this was a ng2-file-upload issue, it's not! It's a input file issue...

I added a event to my input and it solved it.

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

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

I could solve it in the following way

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