How to add a "retry upload" button with kendo ui and angular

  angular, kendo-ui, kendo-upload

I want to add an icon button after uploading a file with kendo UI where I can re upload this file. Anyone know how to fix that ?

This is my html component :

    <kendo-upload  class="mobile-max-height-240" [autoUpload]="false" style="margin-top:2%;"
            (select)="onSelect($event)" (remove)="onRemove($event)" [restrictions]="fileRestrictions"
            [(ngModel)]="addedfiles">
            <kendo-upload-messages select="Add"></kendo-upload-messages>
          </kendo-upload>

And this is my ts component:

export class FilesUploadComponent implements OnInit {
 addedfiles : Array<any> = [];
 fileRestrictions: FileRestrictions = {
 allowedExtensions: ['.jpg', '.png', '.jpeg', '.doc', '.docx','.pdf'],
 maxFileSize: 5000000
 };
 constructor() { }

 ngOnInit() {
 }

 // select a file from your device
  public onSelect(ev: any): void {
    ev.files.forEach((file: FileInfo) => {
 
    if (file.rawFile) {
    const reader = new FileReader();
    if(this.fileRestrictions.allowedExtensions.includes(file.extension.toLowerCase()))
    {reader.onloadend = () => {
      this.addedfiles.push({ ...file, src: reader.result as string });
    };
    reader.readAsDataURL(file.rawFile);
  }
  }
  });
  }

// remove a selected file
public onRemove(ev: RemoveEvent): void {
 ev.files.forEach((file: FileInfo) => {
  this.addedfiles = this.addedfiles.filter(f => f.uid !== file.uid);
});
}

This code enable me to upload files with the option of remove, how can I add the option of re upload files like this photo ?
enter image description here

Source: Angular Questions

One Reply to “How to add a "retry upload" button with kendo ui and angular”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.