Is there an example on how to implement Upload control using Razor Pages?

[Oscar]

Hi, I am trying to add an upload control to a defult Telerik UI for ASP:Net Core Razor Page but it is not working.

This is all I have in Index.cshtml:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@using HelloAspNetCore.Data
@using Kendo.Mvc.UI

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

<div class="text-center">
    <h2>Telerik UI DatePicker for ASP.Net Core</h2>
    @(Html.Kendo().DatePicker()
    .Name("my-picker")
    )
</div>

<br />

<div>
    @(Html.Kendo().Upload()
    .Name("files")
    .Async(a => a
        .Save("Save", "Upload")
        .Remove("Remove", "Upload")
        .AutoUpload(true)
        )
    )
</div>

<br />

<div>
@(Html.Kendo().Grid<OrderViewModel>
                                ().Name("grid")
                                .Groupable()
                                .Sortable()
                                .Editable()
                                .Scrollable()
                                .ToolBar(x => x.Create())
                                .Columns(columns =>
                                {
                                    columns.Bound(column => column.Freight);
                                    columns.Bound(column => column.ShipName);
                                    columns.Bound(column => column.ShipCity);
                                    columns.Command(column =>
                                    {
                                        column.Edit();
                                        column.Destroy();
                                    }).Width(230);
                                })
                                .DataSource(ds => ds.Ajax()
                                .Read(r => r.Url("/Index?handler=Read").Data("forgeryToken"))
                                .Update(u => u.Url("/Index?handler=Update").Data("forgeryToken"))
                                .Create(c => c.Url("/Index?handler=Create").Data("forgeryToken"))
                                .Destroy(d => d.Url("/Index?handler=Destroy").Data("forgeryToken"))
                                .Model(m => m.Id(id => id.OrderID))
                                .PageSize(10)
                                )
                                .Pageable()
)

</div>

<script>
    function forgeryToken() {
        return kendo.antiForgeryTokens();
    }

    function onChange() {
        $("form").submit();
    }
    
</script>

[Alexander]

Hi Oscar,

Thank you for the provided information and code snippet.

Based on my initial observations, I have noticed that the Telerik UI Upload for ASP.NET Core component has not been configured for a Razor Pages scenario but for an MVC scenario instead. From which the described behavior may occur.

In general, when the Upload component is configured for asynchronous operations within a Razor Page the .SaveUrl() and .RemoveUrl() configuration API methods need to be applied instead.

Upload component:

@(Html.Kendo().Upload()
    .Name("files")
    .Async(a=>
        a.SaveUrl("./UploadIndex?handler=Save")
        .RemoveUrl("./UploadIndex?handler=Save")
    )
    .Validation(validation => validation.AllowedExtensions(new string[] { ".jpg" , ".png", ".jpeg" }))
    .Validation(validation => validation.MaxFileSize(2000000))
)

Page Model Action Methods:

public ActionResult OnPostSave(IEnumerable<IFormFile> files)
{
    //Additional logic...

    // Return an empty string to signify success
    return Content("");
}
public ActionResult OnPostRemove(string[] fileNames)
{
    //Additional logic...

    // Return an empty string to signify success
    return Content("");
}

With that said, I recommend reviewing the following resources that could be of use to you:

• Upload Razor Page Documentation Article - notice that there are two tabs for both the Razor Page and Page Model configuration.

• Upload Razor Pages GitHub Example
  

Please give the suggested above a try and let me know how it works out for you.

Regards,
Alexander
Progress Telerik

[Oscar]

I did, and use the very same examples from the github page but when I click "Select files..." and select 6 jpg files from my computer it says "File(s) failed to upload."

It did not uploaded the files nor display any clue to guess why not.

Any help?

[Alexander]

Based on the provided information, I cannot pinpoint where the issue might be occurring. In this regard, could you provide additional information about the scenario you currently have? For example, a code snippet showing the Upload configuration, or if possible try to reproduce the mentioned behavior in a runnable sample and send it back to me for further review. 

In addition, I did not see an obvious issue with the Upload Razor Pages GitHub sample, as the files with extension ".jpg" seem to be uploading successfully on my end:

 It is important to note also that the files are not actually saved in the demo.