Reputation: 1631
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
Upvotes: 3
Views: 21701
Reputation: 149
I had a bit of a "Duh" moment with this and realized that if you do not Specify a .SaveField property, then the Name of the control has to be the same as the parameter on the Controller.
Code on .cshtml page with SaveField:
Html.Kendo().Upload()
.Multiple(false)
.Name("controlName")
.Async(a => a
.Save("SavePhoto", "Upload")
.AutoUpload(true)
.SaveField("fileParameter")
);
Sample controller:
public ActionResult SavePhoto(IFormFile fileParameter)
If you leave out the SaveLoad:
Html.Kendo().Upload()
.Multiple(false)
.Name("uploadFiles")
.Async(a => a
.Save("SavePhoto", "Upload")
.AutoUpload(true)
);
It will not work. In this case the name of the control must match the parameter in the controller:
public ActionResult SavePhoto(IFormFile uploadFiles)
Upvotes: 2
Reputation: 18893
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("");
}
Upvotes: 9
Reputation: 1631
Finally it worked:
It worked in following way.
$("#files").kendoUpload({
async: {
saveUrl: '@Url.Action("Save", "Home")',
removeUrl: '@Url.Action("Remove", "Home")',
autoUpload: false
}
});
This is how I have made a call to Kendo UI window control and it worked same way to Upload
Save is Action (Function), While Home is Controller class name
Upvotes: 0
Reputation: 15185
Set up your wrappers to save time
@(Html.Kendo().Upload().HtmlAttributes(new { Style = "width:300px;" })
.Name("upImport")
.Messages(e => e.DropFilesHere("Drop files here").Select("Select file"))
.Multiple(false)
.Async(a => a
.Save("UploadFile", "File")
.Remove("RemoveFile", "File")
.AutoUpload(true)
.SaveField("files")
)
.Events(events => events
.Error("onError")
.Success("onSuccess")
)
)
On your server mvc app maybe you have FileService.UploadFile() or something similiar.
public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> files)
{
ServerFileModel model = new ServerFileModel();
try
{
// The Name of the Upload component is "files"
if (files == null || files.Count() == 0)
throw new ArgumentException("No files defined");
HttpPostedFileBase file = files.ToArray()[0];
if (file.ContentLength > 10485760)
throw new ArgumentException("File cannot exceed 10MB");
file.InputStream.Position = 0;
Byte[] destination = new Byte[file.ContentLength];
file.InputStream.Read(destination, 0, file.ContentLength);
//IGNORE THIS
ServerFileFormatEnum type = TempFileStorageController.GetFileFormatForExtension(Path.GetExtension(file.FileName));
ServerFileDescriptor serverFile = TempFileStorageController.AddFile(destination, type);
//IGNORE ABOVE
model.FileIdentifier = serverFile.FileIdentifier;
model.FileName = file.FileName;
model.FileSize = file.ContentLength;
}
catch (Exception e)
{
model.UploadError = e.Message;
}
return Json(model, JsonRequestBehavior.AllowGet);
}
Upvotes: 0