jqueryhtmlasp.net-mvc-4kendo-uikendo-upload

Kendo UI Core - Upload - How to call MVC Controller


I am using Kendo UI Core (Free version) and would like to upload files to Web Server (through MVC Controller). I know the way with paid Kendo UI version but I want to do it with free version of this.

See as below

HTML For Kendo UI Upload

<div class="demo-section k-header">
<input name="files" id="files" type="file" />
</div>

Java Script

$("#files").kendoUpload({
    async: {
        saveUrl: "save",
        removeUrl: "remove",
        autoUpload: true
    }

});

It adds a button as below: enter image description here

Now Once I select files I want to upload it to server through MVC Controller.

How I should make a call to MVC controller from here?

Cheers


Solution

  • For Kendo UI Core(as per your question calling controller action to upload files) :-

    $("#files").kendoUpload({
    async: {
        saveUrl: "controllername/actionname",    //OR// '@Url.Action("actionname", "controllername")'   
        removeUrl: "controllername/actionname",  //OR// '@Url.Action("actionname", "controllername")'
        autoUpload: true
      }
    });
    

    For example if Controller and Action name is Upload and Save for Saving and for removing uploaded files Controller and Action name is Upload and Remove then :-

     $("#files").kendoUpload({
     async: {
        saveUrl: "Upload/Save",     //OR// '@Url.Action("Save", "Upload")'
        removeUrl: "Upload/Remove", //OR// '@Url.Action("Remove", "Upload")'
        autoUpload: true
      }
    });
    

    A Small Demo of Kendo file Upload(for kendo ui web) :-

    View :-

    <form method="post" action='@Url.Action("Submit")' style="width:45%">
        <div class="demo-section">
            @(Html.Kendo().Upload()
                .Name("files")
            )
            <p>
                <input type="submit" value="Submit" class="k-button" />
            </p>
        </div>
    </form>
    

    Controller :-

     public ActionResult Submit(IEnumerable<HttpPostedFileBase> files)
        {
            if (files != null)
            {
                TempData["UploadedFiles"] = GetFileInfo(files);
            }
    
            return RedirectToAction("Index");
        }
    
     private IEnumerable<string> GetFileInfo(IEnumerable<HttpPostedFileBase> files)
        {
            return
                from a in files
                where a != null
                select string.Format("{0} ({1} bytes)", Path.GetFileName(a.FileName), a.ContentLength);
        }
    

    Complete Documentation is here :- http://demos.telerik.com/aspnet-mvc/upload/index


    For Async file Upload :-

    View :-

    <div style="width:45%">
        <div class="demo-section">
            @(Html.Kendo().Upload()
                .Name("files")
                .Async(a => a
                    .Save("Save", "Upload")
                    .Remove("Remove", "Upload")
                    .AutoUpload(true)
                )
            )
        </div>
    </div>
    

    Controller :-

     public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
            {
                // The Name of the Upload component is "files"
                if (files != null)
                {
                    foreach (var file in files)
                    {
                        // Some browsers send file names with full path.
                        // We are only interested in the file name.
                        var fileName = Path.GetFileName(file.FileName);
                        var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
    
                        // The files are not actually saved in this demo
                        // file.SaveAs(physicalPath);
                    }
                }
    
                // Return an empty string to signify success
                return Content("");
            }
    
            public ActionResult Remove(string[] fileNames)
            {
                // The parameter of the Remove action must be called "fileNames"
    
                if (fileNames != null)
                {
                    foreach (var fullName in fileNames)
                    {
                        var fileName = Path.GetFileName(fullName);
                        var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
    
                        // TODO: Verify user permissions
    
                        if (System.IO.File.Exists(physicalPath))
                        {
                            // The files are not actually removed in this demo
                            // System.IO.File.Delete(physicalPath);
                        }
                    }
                }
    
                // Return an empty string to signify success
                return Content("");
            }