Search code examples
cssbootstrap-4kendo-uikendo-upload

kendo File Upload change button using Bootstrap4

In this sample can I change the button select Files to this add files with the plus sign? Can I just used this k-button class and using Bootstrap4 class?

https://blueimp.github.io/jQuery-File-Upload/


https://dojo.telerik.com/@mcdevittnccn/ujOHacoM
Solution

  • Set the localization.select (documentation) value to specify the text. Then use jQuery to add the custom classes and icon.

    $("#files").kendoUpload({
  localization: {
      select: "Add Files..."
  }
});
$("#files").closest('.k-upload-button').addClass('btn btn-success'); // add the bootstrap classes
$("#files").closest('.k-upload-button').removeClass('k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'); // remove the kendo classes
$("#files").closest('.k-upload-button').prepend('<span class="k-icon k-i-plus"></span>'); // add the icon

    Example: https://dojo.telerik.com/aJaHeMOq