Hide messages after upload + change select button

[Divyesh]

I'm working with the upload feature of Kendo with Angular 4. I have two questions:

1) Is there any way to completely hide any info. messages/remove & re-upload actions that appear after uploading the file?

2) Is there any way to change the "Select" button to just a font-awesome upload icon (with no text)?

Thanks!

[Dimitar]

Hello Divyesh,

The described behavior can be observed on the following Dojo example.

The Kendo UI Upload's showFileList property can be used to disable the display of a file list of the uploaded files. In addition to this, the upload status messages and buttons can be hidden by the following CSS:

<style>
.k-upload-status { display: none; }
</style>

The select button can also be customized by using the localization.select property, where a custom font-awesome icon/text can be displayed:

$("#photos").kendoUpload({
  localization: {
    select: '<i class="fa fa-upload"></i>'
  }
});

Regards,
Dimitar
Progress Telerik

[Divyesh]

Hi,

Thank you! Works great.

Just curious: Is there a more "Angular" way of achieving this, instead of using jQuery?

[Dimitar]

Hello Divyesh,

The localization.select property expects a string to be passed as a parameter and not HTML. Therefore, the solution provided in my previous reply is a bit hack-ish and can be simplified.

On the following Dojo example, you will find an simple implementation of the Kendo UI Upload widget in AngularJS (as requested). With it, a more simple approach is used to set the font-awesome icon to the upload button. Basically, the localization.select property is used to remove the text from the button and the new icon is added by a simple CSS rule:

.k-upload .k-button.k-upload-button:before
{
  font-family: FontAwesome;
  content: "\f093";
}

Regards,
Dimitar
Progress Telerik

[Divyesh]

Hi Dimitar,

Thank you for the response.

However, as mentioned in the original post, I'm working with Angular 4, and not AngularJS (1.x). So this solution is not working for me and I was looking for an Angular 4 solution, something that works with: http://www.telerik.com/kendo-angular-ui/components/upload/.

Thanks!

[Dimiter Topalov]

Hi Divyesh,

I apologize for the misunderstanding. The approach for hiding the undesired selected files parts of the Upload would be the same, just the selectors are different:

.k-upload-files.k-reset {
      display: none;
    }

You can remove the "Select..." text by providing an empty string to the select option of the kendo-upload-messages component:

<kendo-upload-messages
        select=" "
        >
    </kendo-upload-messages>

... and style the button content via CSS:

.k-upload-button span::after {
      font-family: FontAwesome;
      content: " \\f093";
    }

Here is a runnable example:

http://plnkr.co/edit/WzctwQz4Ncy7Xf7cyOyM?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Divyesh]

Perfect, thank you so very much!