0

I am using Kendo UI upload control. I have defined the Kendo UI upload like this:

 @(Html.Kendo().Upload()
            .Name("files")
            .Events(events => events.Select("onSelectFiles"))
            )

and the files are uploaded when the form is submitted (using the basic upload method defined by telerik).

Now, I want to perform the upload using a button and an ajax call,so I need to send the selected files as parameters for the call. The async upload does not suit my situation because I want to control the upload myself throug the button. How can I access the selected files?

Mihai Labo
  • 1,082
  • 2
  • 16
  • 40

2 Answers2

0

Searching for "uploading files using javascript" revealed plenty of results. Here's one answered six years ago: jQuery Ajax File Upload. You can also read about using files from web applications and use the File API (which is more current), if it's supported by your target browsers.

Community
  • 1
  • 1
Brett
  • 4,268
  • 1
  • 13
  • 28
0

We actually use Kendo for our UI at work. Ajax Upload buttons aren't too bad. Here's an example VB action and Razor (I picked VB because it's this app's language. If you need C# it's ez to translate)

Main things to note: The SaveField string in Razor HAS TO BE the name used for the IEnumerable HttpPostedFileBase arg in the controller method, otherwise the files won't be passed to the action. This is a kendo quirk.

VB Method Sig

Public Function UploadFile(files As IEnumerable(Of HttpPostedFileBase)) As ActionResult
//dostuff

Razor Block

@(Html.Kendo().Upload()
   .Name("previewFile")
   .Multiple(false)
   .Async(a => a
      .Save("UploadFile", "PosterSignup")
      .Remove("RemoveFile", "PosterSignup")
      .SaveField("files")
      .AutoUpload(true)
   )
   .Events(e => e
      .Select("onPreviewSelect"))
   )

The Select event in the razor code can be a function used to perform checks or dialog prompts, and you can force it to cancel the auto upload by performing a preventDefault(). Aka

Subscribe to the Select event to control upload

function onPreviewSelect(e) {
   if(//someCheck){
      e.preventDefault();
   }
}

If you don't want to autoUpload and preventDefault you can also remove autoUpload and use whatever Kendo action is exposed to begin file streaming to the server (I forget and their documentation is horrendous).

Erik
  • 169
  • 6