Hide messages after upload + change select button

7 posts, 0 answers
  1. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 03 Aug Link to this post

    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!
  2. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 07 Aug Link to this post

    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.
  3. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 07 Aug in reply to Dimitar Link to this post

    Hi,

    Thank you! Works great.

    Just curious: Is there a more "Angular" way of achieving this, instead of using jQuery?
  4. Dimitar
    Admin
    Dimitar avatar
    173 posts

    Posted 08 Aug Link to this post

    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.
  5. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 09 Aug Link to this post

    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!
  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 11 Aug Link to this post

    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.
  7. Divyesh
    Divyesh avatar
    17 posts
    Member since:
    Jun 2017

    Posted 11 Aug Link to this post

    Perfect, thank you so very much!
Back to Top