This is a migrated thread and some comments may be shown as answers.

Hide messages after upload + change select button

6 Answers 1003 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Divyesh
Top achievements
Rank 1
Divyesh asked on 03 Aug 2017, 04:58 PM
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!

6 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 07 Aug 2017, 07:55 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Divyesh
Top achievements
Rank 1
answered on 07 Aug 2017, 12:31 PM
Hi,

Thank you! Works great.

Just curious: Is there a more "Angular" way of achieving this, instead of using jQuery?
0
Dimitar
Telerik team
answered on 08 Aug 2017, 12:01 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Divyesh
Top achievements
Rank 1
answered on 09 Aug 2017, 03:29 PM
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!
0
Dimiter Topalov
Telerik team
answered on 11 Aug 2017, 02:09 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Divyesh
Top achievements
Rank 1
answered on 11 Aug 2017, 03:02 PM
Perfect, thank you so very much!
Tags
Upload
Asked by
Divyesh
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Divyesh
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or