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

Question

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>

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.

Answer 1

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');