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("");
}
1 comment:
I have a Kendu Grid that have to have an upload control for each an every row on Insert or Update. here is my code but it doesnt work. Can somebody help
<% =Html.Kendo().Grid().Name("Grid").HtmlAttributes(new { style = "border: 1;" })
.Columns(columns =>
{
columns.Bound(p => p.Tech_Acc_Repo_ID).Width(120).Title("Repo ID").Sortable(false);
columns.Bound(p => p.Tech_Acc_Repo_Description).Width(120).Title("Description");
columns.Bound(p => p.Tech_Acc_Repo_FileName).Width(10).Title("File Name");
columns.Bound(p => p.Tech_Acc_Repo_ContentType).Width(100).Title("Content Type");
columns.Template(o => @Html.Kendo().Upload().Name("fileUploader").Async(a => a.Save("Save", "Test").Remove("Remove", "Test").AutoUpload(false))
.Events(events => events
.Cancel("onCancel")
.Complete("onComplete")
.Error("onError")
//.Progress("onProgress")
.Remove("onRemove")
.Select("onSelect")
.Success("onSuccess")
.Upload("onUpload")
)).Title("Repo Data").Width(100);
columns.Bound(p => p.SecUserID).Width(60).Title("User ID");
columns.Command(command => { command.Edit().UpdateText("Save"); command.Destroy().Text("Remove"); }).Width(200);
}).Pageable().Sortable().ToolBar(toolbar => toolbar.Create()).Filterable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Tech_Acc_Repo_ID))
.Create(create => create.Action("CCCreate", "Repository"))
.Read(read => read.Action("Load_Tech_Access_Repo_List", "Repository").GetType())
.Update(update => update.Action("CCUpdate", "Repository"))
.Destroy(destroy => destroy.Action("CCDestroy", "Repository"))
)
%>
Post a Comment