Upload using tag helpers

[Marc-Andre]

Hi,

I try to use the tag helpers with the upload control, but I'm not able to convert all the code du to the lack of documentation.

How to convert this code to use the tag helpers.

                        @(Html.Kendo().Upload()
                                                    .Name("files")
                                                    .HtmlAttributes(new { aria_label = "files" })
                                                    .Validation(validation => validation.AllowedExtensions(new string[] { ".pdf", ".jpg", ".png" }))
                                                    .Validation(validation => validation.MaxFileSize(10485760))
                                                    .Files(files =>
                                                    {
                                                        if (Model != null && Model.AttachedFiles != null)
                                                        {
                                                            foreach (var f in Model.AttachedFiles)
                                                                files.Add().Name(f.fileName).Extension(System.IO.Path.GetExtension(f.fileName)).Size(f.length);
                                                        }
                                                    })
                                                    .Async(async => async
                                                        .Save("SaveFilesAsync", "Controller")
                                                        .Remove("RemoveFiles", "Controller"))
                                                    .Events(events => events
                                                    .Select("onSelect"))
                        )

 

 

 

[Marin Bratanov]

Hello Marc-Andre,

You can find examples of how to use the tag helper in the following article, together with exmples on the inner tags and comparison with the HTML helper: https://docs.telerik.com/aspnet-core/tag-helpers/editors/upload/overview. The full API of the underlying jQuery widget can also be used as guidance, the property names tend to become in kebab-case rather than camelCase, and major configuration sections become inner tags: https://docs.telerik.com/kendo-ui/api/javascript/ui/upload.

You can also use the VS Intellisense for assistance (screenshot attached below).

Before we get to the examples below, I would appreciate your feedback on what you find to be lacking in the documentation and intellisense so we can keep it in mind and improve it.

That said, here's how the provided html helper would look like in a tag helper (I'm also attaching a screenshot of the rendered jQuery widget configuration to serve as comparison):

@(Html.Kendo().Upload()
            .Name("files")
            .HtmlAttributes(new { aria_label = "files" })
            .Validation(validation => validation.AllowedExtensions(new string[] { ".pdf", ".jpg", ".png" }))
            .Validation(validation => validation.MaxFileSize(10485760))
            .Async(async => async
                .Save("SaveFilesAsync", "Controller")
                .Remove("RemoveFiles", "Controller"))
            .Events(events => events
            .Select("onSelect"))
)

<kendo-upload name="files2" aria-label="files" on-select="onSelect">
    <async save-url="Controller/SaveFilesAsync" remove-url="Controller/RemoveFiles" />
    <validation allowed-extensions='@new string[] { ".pdf", ".jpg", ".png" }' max-file-size="10485760" />
</kendo-upload>

<script>
    function onSelect(evt) {
        console.log(evt);
    }
</script>

While I am also attaching an example I built for you (it doesn't have the actual actions to handle files though), I am going to also paste hare a sample set of markup with the loop for adding files - it is no different than looping to create any other element:

@(Html.Kendo().Upload()
            .Name("files")
            .HtmlAttributes(new { aria_label = "files" })
            .Validation(validation => validation.AllowedExtensions(new string[] { ".pdf", ".jpg", ".png" }))
            .Validation(validation => validation.MaxFileSize(10485760))
            .Files(files =>
            {
                if (Model != null && Model.AttachedFiles != null)
                {
                    foreach (var f in Model.AttachedFiles)
                        files.Add().Name(f.fileName).Extension(System.IO.Path.GetExtension(f.fileName)).Size(f.length);
                }
            })
            .Async(async => async
                .Save("SaveFilesAsync", "Controller")
                .Remove("RemoveFiles", "Controller"))
            .Events(events => events
            .Select("onSelect"))
)

<kendo-upload name="files2" aria-label="files" on-select="onSelect">
    <async save-url="Controller/SaveFilesAsync" remove-url="Controller/RemoveFiles" />
    <validation allowed-extensions='@new string[] { ".pdf", ".jpg", ".png" }' max-file-size="10485760" />
    @if (Model != null && Model.AttachedFiles != null)
    {
        <files>
            @foreach (AttachedFile item in Model.AttachedFiles)
            {
                <file name="@item.fileName" size="@item.length" extension="@System.IO.Path.GetExtension(item.fileName)"></file>
            }
        </files>
    }
</kendo-upload>

<script>
    function onSelect(evt) {
        console.log(evt);
    }
</script>

 

Regards,
Marin Bratanov
Progress Telerik

[Heiko]

Thanks for the examples. First, the TagHelper-Example in Teleriks Online-Help is not very good (missing "@Model.Extensions" etc.)

Second, I can't see how to use it with Razor Syntax in ASP.NET Core 2.2. There is no Controller anymore, just a PageModel and Handler methods. How can I use this new syntax? 

[Veselin Tsvetanov]

Hello Heiko,

Attached you will find a small sample implementing an Upload Tag Helper in Razor Pages scenario. The Save and Remove endpoints are page methods. You will notice that I have also included an AntyForgery token in order to properly pass the files data to the server:

@Html.AntiForgeryToken()

<kendo-upload name="files" aria-label="files" on-select="onSelect">
	<async save-url="./Index?handler=Save" remove-url="./Index?handler=Remove" />
	<validation allowed-extensions='@new string[] { ".pdf", ".jpg", ".png" }' max-file-size="10485760" />
	@if (Model != null && Model.AttachedFiles != null)
	{
		<files>
			@foreach (AttachedFile item in Model.AttachedFiles)
			{
				<file name="@item.fileName" size="@item.length" extension="@System.IO.Path.GetExtension(item.fileName)"></file>
			}
		</files>
	}
</kendo-upload>

<script>
	function onSelect(e) { }

	$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
		jqXHR.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
	});
</script>

Regards,
Veselin Tsvetanov
Progress Telerik

[Veselin Tsvetanov]

Hi,

And here is the sample. Sorry for missing it in my previous reply.

Regards,
Veselin Tsvetanov
Progress Telerik

[Heiko]

Hi Veselin,

I only got around to looking at your code today. Works really well, thank you very much!

Regards
Heiko