Upload with minimal UI possible?

[Uwe]

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?

[Marin Bratanov]

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