angularkendo-uikendo-upload

Kendo-Angular: Disable select file button in kendo-upload

I have implemented kendo upload in my angular project

component.html

    <kendo-upload
    #upload
    [autoUpload]="false"
    (select)="onSelectEvent($event)"
  (remove)="onRemoveEvent($event, upload)"
  (upload)="onUploadEvent($event)"
  [multiple]="false"
  [restrictions]="myRestrictions">
  </kendo-upload>

enter image description here

I want to disable the 'Select file' button once the file is selected as in picture and enable once user clicks on clear button or 'X'.

Please help me with your suggestions as I'm new to Kendo and couldn't find documentation.

Solution

  • The file upload offers a disable attribute. Here is a demo:

    https://www.telerik.com/kendo-angular-ui/components/uploads/upload/disabled-state/

    So for example:

    <kendo-upload [disabled]="hasFile$ | async"> </kendo-upload>

    Where hasFile$ is:

    public hasFile$ = new BehaviorSubject(false);

    If you only use a boolean instead of an observable the change detection won't pick it up

    To only disable the button and not the rest of the upload:

    (this.upload.fileSelectButton.nativeElement as HTMLElement).classList.add('k-state-disabled');