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

Upload with minimal UI possible?

1 Answer 85 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Uwe
Top achievements
Rank 1
Uwe asked on 25 Dec 2018, 01:19 PM

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?

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 26 Dec 2018, 08:13 AM
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.
Tags
Upload
Asked by
Uwe
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or