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 1112 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/.

Taoufik
Top achievements
Rank 1
commented on 15 Sep 2023, 11:26 AM

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.
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