Edit this page

Metadata

Asynchronous uploading usually 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.

Send and Receive

Send Metadata

To send metadata over to the save handler:

  1. Add an input field for the file description. Its value is going to be sent 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 upload event handler.

    Example
        $("#photos").kendoUpload({
            async: {
                saveUrl: "saveHandler.php",
                removeUrl: "removeHandler.php"
            },
            upload: onUpload
        });
    
  4. Process the file and the associated description.

The description, and any other fields of the e.data object, are going to be serialized in the POST request.

For more information on how to read posted form fields, refer to the documentation of your server-side platform.

Receive Metadata

The save handler can sometimes produce a result that needs to be routed back to the page. The Upload requires a response in a JSON format with a Content-Type set to "text/plain". Responses that are not empty and in a format other than JSON are going to be treated as a server error.

To receive metadata from the save handler, follow the steps below:

  1. Build the response.

    Example
        <?php
    
            header('Content-Type: text/plain;');
    
            $data = array('foo' => 'bar', 'status' => 'ok');
    
            echo json_encode($data);
        ?>
    
  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.

    Example
        $("#photos").kendoUpload({
            async: {
                saveUrl: "saveHandler.php",
                removeUrl: "removeHandler.php"
            },
            success: onSuccess
        });
    

Important

The same approach of sending and receiving metadata is also applicable for the remove handler.

See Also

Other articles on the Kendo UI Upload:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy