RadUpload for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

You can add your own custom information to the files RadUpload uploads to the server. RadUpload supports two types of custom fields: text fields and boolean fields.

Adding custom fields

To add custom fields to the uploaded files, use the OnClientAdded client-side event to add controls to the RadUpload control where the user can enter the values:

  1. Use the get_row() method of the eventArgs to access each row that is added to the RadUpload control.

  2. Use the row to add input elements (to the row or next to the row):

    • Add an input element of type "text" to add a text field to the uploaded file.

    • Add an input element of type "check box" to add a boolean field to the uploaded file.

  3. For each input element you add, assign its id and name attributes to a value that you obtain using the RadUpload.getID(name) method. The id and name must be generated by the RadUpload control so that it can locate the values server-side.

Caution

To ensure the proper operation of the event handler in all browsers you must declare the function before the RadUpload declaration.

Caution

The following example adds <LI> elements to the UL list of the RadUpload. Note that MaxFileInputsCount property counts the number of <LI> elements so you need to use it with attention. Check the online example for another approach.

The following example shows an OnClientAdded event handler that adds two elements, a text field and a boolean field:

CopyJavaScript
var numberOfCustomFields = 0;
function OnClientAddedHandler(sender, eventArgs) {
    var inputRow = eventArgs.get_row();
    var uList = inputRow.parentNode;
    var count = 0;
    // add a new row for a Title field
    newRow = document.createElement("li");   
    count++;
    uList.insertBefore(newRow, inputRow);
    var label = document.createElement("span");
    label.innerHTML = "Title ";
    label.style.fontSize = 12;
    input = document.createElement("input");
    input.type = "text";
    input.id = input.name = sender.getID("Title");
    newRow.appendChild(label);
    newRow.appendChild(input);
    //new row for a Thumbnail check box   
    newRow = document.createElement("li");
    count++;
    uList.insertBefore(newRow, inputRow);
    var label = document.createElement("span");
    label.innerHTML = "Create Thumbnail";
    label.style.fontSize = 12;
    input = document.createElement("input");
    input.type = "checkbox";
    input.id = input.name = sender.getID("Thumbnail");
    newRow.appendChild(input);
    newRow.appendChild(label);
    //add a File label in front of the file input   
    var fileInputSpan = inputRow.getElementsByTagName("span")[0];
    label = document.createElement("span");
    label.innerHTML = "File ";
    label.style.fontSize = 12;   
    inputRow.insertBefore(label, fileInputSpan);
    numberOfCustomFields = count;
}

function OnClientDeletingHandler(sender, eventArgs) {
    var input = eventArgs.get_fileInputField();
    deleteCustomFields(input); 
}

function OnClientDeletingSelectedHandler(sender, eventArgs) {
    var inputs = eventArgs.get_fileInputFields();
    for (i = 0; i < inputs.length; i++) {
        deleteCustomFields(inputs[i]);
    } eventArgs.set_cancel(true); 
}

function deleteCustomFields(input) {
    var li = input.parentNode.parentNode;
    var ul = input.parentNode.parentNode.parentNode;
    for (var i = 0; i < numberOfCustomFields; i++) {
        ul.removeChild(li.previousSibling);
    }

    ul.removeChild(li); 
}
CopyASPX
<telerik:radupload id="RadUpload1" onclientadded="OnClientAddedHandler" onclientdeleting="OnClientDeletingHandler"
    onclientdeletingselected="OnClientDeletingSelectedHandler" runat="server" />

Retrieving Field Values

Server-side, you can use the method UplodedFile.GetFieldValue(name) method.

  • To retrieve the value of a boolean field, use the UploadedFile.GetIsFieldChecked(name) method.

Note

Use the same value that was passed to the RadUpload.getID(name) method when retrieving a field value.

The following example shows how to retrieve the values the user entered for the custom fields added in the previous example:

 

See Also