Handling of Metadata
Asynchronous uploading usually means that you lose the association between the files and the context that they originate from. Take an e-mail application, for example. The save handler must associate the uploaded files to a particular message. The message and the file might even be processed on different servers in a load balancing or a cloud-computing scenario.
Send Metadata to Save Actions
Use Route Values
The metadata known during the rendering can be forwarded to the save
action as route variables.
Below are listed the steps for you to follow when configuring the sending of metadata to the save
action by using route values in the Kendo UI Upload.
-
Generate an unique message ID and store it in the
ViewData
.Example
public ActionResult Index() { ViewBag.MessageId = Guid.NewGuid().ToString(); return View(); }
-
Add the message ID to the route values.
<%= Html.Kendo().Upload() .Name("attachments") .Async(async => async .Save("Save", "Home", new { messageId = ViewBag.MessageId }) ) %>
@(Html.Kendo().Upload() .Name("attachments") .Async(async => async .Save("Save", "Home", new { messageId = ViewBag.MessageId }) ) )
-
Process the file using the message ID.
Example
[HttpPost] public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments, string messageId) { foreach (var file in attachments) { // 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("~/App_Data"), messageId, fileName); file.SaveAs(destinationPath); } // Return an empty string to signify success return Content(""); }
The same technique is applicable with the remove
action and remove
event.
Use Upload Client-Side Event
You can also add metadata directly on the client, which is useful when the data is not known in advance.
Below are listed the steps for you to follow to do that.
-
Add an input field for description. We will send its value to the save handler.
Example
<input type="text" id="fileDescription" />
-
Declare a handler for the upload event and attach a data object to the passed event.
Example
function onUpload(e) { e.data = { fileDescription: $("#fileDescription").val() }; }
-
Attach the event handler.
<%= Html.Kendo().Upload() .Name("attachments") .Async(async => async .Save("Save", "Home") ) .Events(c => c .Upload("onUpload") ) %>
@(Html.Kendo().Upload() .Name("attachments") .Async(async => async .Save("Save", "Home") ) .Events(c => c .Upload("onUpload") ) )
-
Process the file and the associated description.
Example
[HttpPost] public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments, string fileDescription) { foreach (var file in attachments) { // 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("~/App_Data"), fileName); // TODO: Store description... file.SaveAs(destinationPath); } // Return an empty string to signify success return Content(""); }
Receive Metadata from Save Handlers
The save
handler can sometimes produce a result that needs to be routed back to the page. The Upload requires the response to be in JSON format with the Content-Type set to "text/plain"
. Any non-empty response that is not JSON is treated as a server error.
Below are listed the steps for you to follow when configuring the receiving of metadata from the save
action in the Kendo UI Upload.
-
Build the response.
Example
[HttpPost] public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments) { // ... // When returning JSON the mime-type must be set to text/plain return Json(new { status = "OK" }, "text/plain"); }
-
Declare a handler for the
success
event and process the response.Example
function onSuccess(e) { alert("Status: " + e.response.status); }
-
Attach the event handler.
<%= Html.Kendo().Upload() .Name("attachments") .Async(async => async .Save("Save", "Home") ) .Events(c => c .Success("onSuccess") ) %>
@(Html.Kendo().Upload() .Name("attachments") .Async(async => async .Save("Save", "Home") ) .Events(c => c .Success("onSuccess") ) )
The same approach is applicable for the remove
handler as well.
See Also
- Overview of the Upload HtmlHelper
- Upload HtmlHelper Modes of Operation
- Chunk Upload
- How to Upload Files from Grid Popup Editors in ASP.NET MVC Applications
- How to Upload Files to Databases in ASP.NET MVC Applications
- Overview of the Kendo UI Upload Widget
- Overview of Telerik UI for ASP.NET MVC
- Fundamentals of Telerik UI for ASP.NET MVC
- Scaffolding in Telerik UI for ASP.NET MVC
- Telerik UI for ASP.NET MVC API Reference Folder
- Telerik UI for ASP.NET MVC HtmlHelpers Folder
- Tutorials on Telerik UI for ASP.NET MVC
- Telerik UI for ASP.NET MVC Troubleshooting
- Upload HtmlHelper Troubleshooting