Metadata

Usually, asynchronous uploading means that you lose the association between the files and the context they originate from.

For example, in an application, the save handler must associate the uploaded files with a particular message. The message and the file might be processed on different servers in a load-balancing or cloud-computing scenario.

Sending Metadata

You can send metadata by using route values or by using the upload event on the client.

Forwarding Metadata through Route Values

The suggested approach is also applicable to the remove action and remove event.

To forward the metadata that is known during the rendering to the save action as route variables:

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

    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.

    [HttpPost]
    public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments, string messageId)
    {
        foreach (var file in attachments)
        {
            // Some browsers send file names with full path but you have to take into account only 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("");
    }
    

Adding Metadata on the Client

When the data is not known in advance, you can also add the metadata directly on the client:

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

    <input type="text" id="fileDescription" />
    
  2. Declare a handler for the upload event and attach a data object to the passed event.

    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.

    [HttpPost]
    public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments, string fileDescription)
    {
        foreach (var file in attachments)
        {
            // Some browsers send file names with a full path but you need to take into account only 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("");
    }
    

Receiving Metadata

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. The suggested approach is applicable for the remove handler as well.

To configure the receiving of metadata from the save action in the Upload:

  1. Build the response.

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

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

See Also

In this article
Not finding the help you need? Improve this article