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:
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
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) :-
<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>
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 :-
<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>
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("");
}