Upload with minimal UI possible?

2 posts, 0 answers
  1. Uwe
    Uwe avatar
    16 posts
    Member since:
    Mar 2008

    Posted 25 Dec 2018 Link to this post

    Currently evaluating the Upload control, I ideally want only a simple upload button to select local files and do everyting else on my own through the client API.

    Especially the gray div (k-widget k-upload k-header) around the button bothers me.

     

    My question:

    Is it possible to tell the Upload control to simply display the core upload button and omit everything else, even after the user has selected files?

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4713 posts

    Posted 26 Dec 2018 Link to this post

    Hi Uwe,

    If you don't intend to use the rich features of the widget, you may as well use a standard <input type="file" /> so you can style it as desired.

    That said, you can override the CSS rules for the upload widget to get the appearance you desire. If you start with something like the following snippet, it will already be quite minimal and the files that are selected won't be shown:

    <form method="post" action='@Url.Action("Basic_Usage_Submit")'>
        <div style="width: 130px;">
            @(Html.Kendo().Upload()
                        .Name("files")
                        .HtmlAttributes(new { aria_label = "files" })
                        .ShowFileList(false)
            )
        </div>
            <button type="submit" class="k-button k-primary">Submit</button>
    </form>

    You can then use JavaScript to add/remove classes in order to get the desired appearance. Here's an example I made for you that leaves just a "select files" button:

    <style>
        div.k-upload.noMargin .k-button {
            margin: 0;
        }
    </style>
    <form method="post" action='@Url.Action("Basic_Usage_Submit")'>
            @(Html.Kendo().Upload()
                        .Name("files")
                        .HtmlAttributes(new { aria_label = "files", @class = "noHeader" })
                        .ShowFileList(false)
            )
        <script>
            $(document).ready(function () {
                $(".noHeader").parents(".k-upload.k-header").first().removeClass("k-header k-widget").addClass("noMargin");
            });
        </script>
            <button type="submit" class="k-button k-primary">Submit</button>
    </form>


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top