1

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.

Kiran Narayan
  • 95
  • 7

1 Answers1

2

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');
misha130
  • 5,457
  • 2
  • 29
  • 51
  • Thank you for your suggestion, but this disables entire upload section along with 'X' mark, so user cannot remove the attached file and upload again. – Kiran Narayan Dec 07 '21 at 12:28
  • You have (this.upload as UploadComponent).fileSelectButton or (this.upload as UploadComponent).fileSelect which both have disabled properties. I don't have an environment right now to test this but thats probably the way to go. Access the file-select and disable it in the ts – misha130 Dec 07 '21 at 13:31
  • 1
    Added to the answer a way to disable only the button – misha130 Dec 07 '21 at 16:22