Using Upload on Kendo Window

[Jaesoon]

I'm trying to add an upload feature on a Kendo Window which uses forms, so a user can fill in details, attach a file, and press save - which will post to the controller and save the file and associated data and close the window.



After trying to get the upload to work using Ajax.BeginForm (as below), 

@using (Ajax.BeginForm("Save", "Manage", null, new AjaxOptions {HttpMethod = "POST"}, new { enctype = "multipart/form-data", @id = "form", target = "_self"  }))

i kept getting a null value (for the file parameter) and came to the conclusion that the upload control only works for Html.BeginForm (as below)

@using (Html.BeginForm("Save", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))

and can see the file parameter coming through when i use it.


However, using Html.BeginForm will force a reload of a page (by redirection) which I do not want to happen. Also I do not want asynchronous uploading to happen as saving the file requires some additional data on the form before it can be saved.


The controller looks like this

[HttpPost]
public ActionResult Save (Model model, IEnumerable<HttpPostedFileBase> file)

Currently for any other screen which does not use the Kendo Uploader, I am using Ajax.BeginForm which posts to the controller and use JavaScript to close the Kendo Window.



What is the correct way of adding a Kendo Upload control onto a Kendo Window and to save / upload the file and close the window?

And if not is there a way to emulate the Kendo Upload's async method when saving the form?

Otherwise is there a way to use Html.BeginForm on a window and stop it from redirecting to a different page?

[Dimiter Madjarov]

Hello Jaesoon,

A file cannot be uploaded via Ajax.BeginForm. This is not supported by the framework, so there is no workaround that I could suggest using this approach.

I would recommend using the asynchronous Kendo UI Upload widget. The rest of the form data could be send along with the uploaded file as additional metadata using the following approach.

Regards,
Dimiter Madjarov
Telerik

[Gerardo]

Hello Dimiter

is this still true in 2020 version?

regards

[Misho]

Hello,

Kendo Upload component provides synchronous and asynchronous modes of operation, chunk upload of files, multiple files selection and removal, progress tracking and in-progress cancellation of the upload. You can get acquainted in more detail with its features and capabilities in the Support & Learning Resources:

• Demos
• Forums
• Knowledge Base
• Documentation

In case you have a specific question please provide us with more details regarding the exact scenario you would like to achieve with Kendo Upload.

 

Best Regards,
Misho
Progress Telerik

[Gerardo]

hi Misho,

my specific question was if "A file cannot be uploaded via Ajax.BeginForm. " is still true for the latest version.

See, I'm submitting a form with ajax and the upload field is not present, I want to confirm if due to same limitation.

 

[Ivan Danchev]

Hi Gerardo,

I tested the Upload (latest version) with an AJAX form and was able to upload the selected file. Here's the setup:

@using (Ajax.BeginForm("FormSubmit", "Home", null,
	new AjaxOptions
	{
		HttpMethod = "POST",
		OnSuccess = "OnSuccess(xhr)",
		OnFailure = "OnFailure(xhr, status)"
	},
	new { id = "myform" }))
{
	@(Html.Kendo().Upload()
		.Name("files")
	)
	<p style="padding-top: 1em; text-align: right">
		<button type="submit" class="k-button k-primary">Submit</button>
	</p>
}

<script>
    function OnSuccess(xhr) {
        console.log("success");
    }
    function OnFailure(xhr, status) {
        console.log("failure");
    }
</script>

and the action:

[HttpPost]
public ActionResult FormSubmit(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        //...do something...
    }

    return RedirectToAction("Result");
}

Regards,
Ivan Danchev
Progress Telerik