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.

1. Generate an unique message ID and store it in the ViewData.

   Example

   public ActionResult Index()
   {
       ViewBag.MessageId = Guid.NewGuid().ToString();
   
       return View();
   }
   

2. 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 })
           )
       )
   

3. 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.

1. Add an input field for description. We will send its value to the save handler.

   Example

   <input type="text" id="fileDescription" />
   

2. 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()
       };
   }
   

3. 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")
           )
       )
   

4. 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.

1. 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");
   }
   

2. Declare a handler for the success event and process the response.

   Example

   function onSuccess(e) {
       alert("Status: " + e.response.status);
   }
   

3. 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