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

Using Upload on Kendo Window

5 Answers 153 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Jaesoon
Top achievements
Rank 1
Jaesoon asked on 09 Apr 2016, 12:01 PM
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?

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 12 Apr 2016, 11:52 AM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Gerardo
Top achievements
Rank 1
Veteran
Iron
answered on 15 Sep 2020, 07:49 PM

Hello Dimiter

is this still true in 2020 version?

regards

0
Misho
Telerik team
answered on 17 Sep 2020, 12:41 PM

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:

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Gerardo
Top achievements
Rank 1
Veteran
Iron
answered on 17 Sep 2020, 01:45 PM

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.

 

0
Ivan Danchev
Telerik team
answered on 21 Sep 2020, 10:25 AM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Upload
Asked by
Jaesoon
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Gerardo
Top achievements
Rank 1
Veteran
Iron
Misho
Telerik team
Ivan Danchev
Telerik team
Share this question
or