How to pass files as parameter to MVC method without submitting the form

[Daochuen]

Hello,

I used kendo upload widget in my project MVC project. How to pass the files through ajax to MVC method without submitting the form?  I tried couple of ways but failed to get the files. Could someone help? Please see my sample code below:

 

---------In .cshtml file -----------

            <div >

                @(Html.Kendo().Upload()

                        .Name("files")

                        .Multiple(false)

                        .HtmlAttributes(new { aria_label = "files" })

                        .Validation(validation => validation.AllowedExtensions(new string[] {".xlsx" }))

                )

 

            @(Html.Kendo().Button()

            .Name("UploadFile")

            .Content("Process Files")

            .Events(event => event.Click("onUploadFile "))

            )

             </div>

 

------In . js file:-------

 

Function onUploadFile(){

        var upload = $("#files").data("kendoUpload"),

          files = upload.getFiles();

 

      $.post("TestMethod" ,

      { files: files },  <-----------------------------------I try to pass parameter here.

     function (data, status) {...}

      );

}

 

------In server side:-------

  public JsonResult TestMethod (IEnumerable<HttpPostedFileBase> files)

        {  ....

            return Json(null, JsonRequestBehavior.AllowGet);

        }

[Petar]

Hi Daochuen,

You can use the Asynchronous Mode of the Upload component. When working it this mode, the selected files are immediately uploaded to the server.

This demo project demonstrates how the Upload component can be configured to work in asynchronous mode in the ASP.NET MVC context. 

You can also find useful the Upload component API and more specific its async properties. If you want to use the jQuery version of the Upload component, here is the linked above demo realized with jQuery.

Regards,
Petar
Progress Telerik