Kendo UI Uploader :
Create a kendo ui uploader control in MVC View
@(Html.Kendo().Upload()
.Name("fileUploader")
.Async(a => a
.Save("Save", "Test")
.Remove("Remove", "Test")
//.SaveUrl("")
.AutoUpload(false)
)
.Events(events =>
events
.Cancel("onCancel")
.Complete("onComplete")
.Error("onError")
//.Progress("onProgress")
.Remove("onRemove")
.Select("onSelect")
.Success("onSuccess")
.Upload("onUpload")
)
)
</div>
JavaScript
<script>
function onSelect(e) {
$("#details").text("Select
:: " + getFileInfo(e));
}
function onUpload(e) {
$("#details").text("Upload
:: " + getFileInfo(e));
}
function onSuccess(e) {
$("#details").text("Success
(" + e.operation + ") :: "
+ getFileInfo(e));
}
function onError(e) {
// $("#details").text("Error (" +
e.operation + ") :: " + getFileInfo(e));
}
function onComplete(e) {
// $("#details").text("Complete");
}
function onCancel(e) {
$("#details").text("Cancel
:: " + getFileInfo(e));
}
function onRemove(e) {
$("#details").text("Remove
:: " + getFileInfo(e));
}
function onProgress(e) {
$("#details").text("Upload
progress :: " + e.percentComplete + "%
:: " + getFileInfo(e));
}
function getFileInfo(e) {
return $.map(e.files, function
(file) {
var info = file.name;
// File size is not available in all browsers
if (file.size > 0) {
info += " (" +
Math.ceil(file.size / 1024) + " KB)";
}
return info;
}).join(", ");
}
</script>
<div id="details" />
Add Controller - Action to Save
and Remove File.
public ActionResult
Save(IEnumerable<HttpPostedFileBase>
fileUploader)//fileUploader name must be the name of
uploader Control.
{
// The Name of the Upload component is
"fileUploader"
foreach (var file in fileUploader)
{
// Some browsers send file names with full
path. We only care about the file name.
var fileName = Path.GetFileName(file.FileName);
var destinationPath = Path.Combine(Server.MapPath("~/download/"), fileName);
file.SaveAs(destinationPath);
}
// Return an empty string to signify success
return Content("");
}
public ActionResult
Remove(string[] fileNames)
{
foreach (var fullName
in fileNames)
{
var fileName = Path.GetFileName(fullName);
var physicalPath = Path.Combine(Server.MapPath("~/download/"), fileName);
// TODO: Verify user permissions
if (System.IO.File.Exists(physicalPath))
{
System.IO.File.Delete(physicalPath);
}
}
// Return an empty string to signify success
return Content("");
}