Overriding class/styling of Upload Component buttons

[Phillip]

I'm using Upload for Angular in my app. I need to style the Clear and Upload buttons to match the rest of my app. I've tried many things but nothing is working. I'm looking to override all of the class attributes of these buttons and assign 'btn btn-bare' to Clear and 'btn btn-primary' to Upload.

[Hetali]

Hello Phillip,

In order to override the class of the buttons in the Kendo UI Upload component, use the setTimeout method in the select event to change the class name. For example:

<kendo-upload
  [autoUpload]="false"
  (select)="fileSelected()"
>
</kendo-upload>

public fileSelected() {  
  setTimeout(() => {
    var upload = document.querySelector(".k-upload-selected");
    upload.className = "btn btn-primary";
    var clear = document.querySelector(".k-clear-selected");
    clear.className = "btn btn-bare";
  });
}

In this StackBlitz example, I have changed the class name of the Upload and the Clear button.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Phillip]

Thank you so much, Hetali. setTimeout was the missing piece.