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

Upload using tag helpers

5 Answers 250 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Marc-Andre
Top achievements
Rank 1
Marc-Andre asked on 14 Dec 2018, 04:44 PM

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"))
                        )

 

 

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 19 Dec 2018, 11:46 AM
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
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.
0
Heiko
Top achievements
Rank 1
Veteran
answered on 16 Oct 2019, 02:46 PM

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? 

0
Veselin Tsvetanov
Telerik team
answered on 21 Oct 2019, 11:24 AM

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

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.
0
Veselin Tsvetanov
Telerik team
answered on 21 Oct 2019, 11:25 AM

Hi,

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

Regards,
Veselin Tsvetanov
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.
0
Heiko
Top achievements
Rank 1
Veteran
answered on 12 Nov 2020, 10:14 AM

Hi Veselin,

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

Regards
Heiko

Tags
Upload
Asked by
Marc-Andre
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Heiko
Top achievements
Rank 1
Veteran
Veselin Tsvetanov
Telerik team
Share this question
or