Customize the File upload in Kendo React

2 posts, 1 answers
  1. Premkumar
    Premkumar avatar
    1 posts
    Member since:
    Apr 2020

    Posted 28 Apr 2020 Link to this post

    Hi,

    I am using Upload functionality kendo react. Is there any possibility to customize the  select file button and upload button. Here I attached the sample design.

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 28 Apr 2020 Link to this post

    Hello, Premkumarm,

    Currently, the buttons of the Upload can be customized only with CSS:

     

    .k-upload .k-upload-button {
      color: blue;
    }

     

    If the requirement is to modify the buttons by adding icons and changing the entire appearance, I can convert this to an official public feature request, and based on its popularity we will plan it accordingly.

    --------------------------------

    Also, I see that the upload button is next to the Upload wherein our rendering the button is under the Upload. This can be achieved by rendering a custom button next to the Upload and uploading the files programmatically. This will require using a controlled mode to keep the files in the state and the getRawFile method to get the real files. This is a short example showcasing a possible approach:

    https://stackblitz.com/edit/react-tmr9k1?file=app%2Fmain.jsx

    - Controlled mode: https://www.telerik.com/kendo-react-ui-develop/components/upload/modes/#toc-controlled-mode

    - Get raw file method: https://www.telerik.com/kendo-react-ui-develop/components/upload/api/UploadFileInfo/#toc-getrawfile

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top