Prevent an upload of an existing file name with kendo-upload

[hiba]

I want to prevent the uploading of an existing file name with kendo-upload, **so when the user uploads a document with a name which already exists, a message is shown "Try again".**

This is the component.ts :

    addedfiles : Array<any> = [];
    fileRestrictions: FileRestrictions = {
    allowedExtensions: ['.jpg', '.png', '.jpeg', '.doc', '.docx','.pdf'],
    maxFileSize: 5000000
    };
    filesNames : Array<String> = [];
    isValidFile : boolean = false;

    public onSelect(ev: any): void {
     ev.files.forEach((file: FileInfo) => {
      let existFileName = this.filesNames.find(f => f == file.name)
      if (!existFileName) // if a file with the same name doesn't exist{
        if (file.rawFile) {
          const reader = new FileReader();
          if (this.fileRestrictions.allowedExtensions.includes(file.extension.toLowerCase())) {
            reader.addEventListener('loadend', () => {
              this.addedfiles.push({ ...file, src: reader.result as string });
              this.filesNames.push(file.name);
              this.isValidFile = false;
            }
            );
            reader.readAsDataURL(file.rawFile);
          }
        }
      }
      else // if a file with the same name exist 
       {
        console.log("added files", this.addedfiles)
        this.isValidFile = true;
      }
    });
    }

      public onRemove(ev: RemoveEvent): void {
       ev.files.forEach((file: FileInfo) => {
        this.addedfiles = this.addedfiles.filter(f => f.uid !== file.uid);
       });
      }
The component.html : 

      <kendo-upload class="mobile-max-height-240" style="margin-top:2%;" 
              (select)="onSelect($event)"
              (remove)="onRemove($event)" [restrictions]="fileRestrictions"
              [(ngModel)]="addedfiles"> 
      </kendo-upload>
      <p *ngIf="isValidFile">try again</p>
The list of addedFiles contain only files with different names. But a file with same name is showen in the kendo-upload zone like that :

[Martin Bechev]

Hello Hiba,

Thank you for the provided details.

Handling the select event of the upload component is the right way to go in this case. In order to prevent a file from uploading (in case a file with the same name exist), use preventDefault method in the select event handler:

  onSelect(event:SelectEvent){
    //checking of an existing file
    ...
    e.preventDefault();
  }

This method prevents showing the selected file in the uploaded list too.

I hope this helps.

Regards,
Martin
Progress Telerik

[Taoufik]

That wouldn't work in case for multi upload mode On, if one of the selected files already exists then we will cancel the whole select event for the other files as well.

[hiba]

Thanks for helping ! It works now