This is a migrated thread and some comments may be shown as answers.

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

2 Answers 47 Views
Upload
This is a migrated thread and some comments may be shown as answers.
hiba
Top achievements
Rank 1
hiba asked on 23 Mar 2021, 09:55 AM
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 :

2 Answers, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 25 Mar 2021, 07:04 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
hiba
Top achievements
Rank 1
answered on 30 Mar 2021, 11:04 AM
Thanks for helping ! It works now
Tags
Upload
Asked by
hiba
Top achievements
Rank 1
Answers by
Martin
Telerik team
hiba
Top achievements
Rank 1
Share this question
or