New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Adding Information to Uploaded Files

RadUpload has been replaced by RadAsyncUpload, Telerik’s next-generation ASP.NET upload component. If you are considering Telerik’s Upload control for new development, check out the documentation of RadAsyncUpload or the control’s product page. If you are already using RadUpload in your projects, you may be interested in reading how easy the transition to RadAsyncUpload is and how you can benefit from it in this blog post. The official support for RadUpload has been discontinued in June 2013 (Q2’13), although it is still be available in the suite. We deeply believe that RadAsyncUpload can better serve your upload needs and we kindly ask you to transition to it to make sure you take advantage of its support and the new features we constantly add to it.

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.

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

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:


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); 
}

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

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:


protected void Button1_Click(object sender, EventArgs e) 
{  
    foreach (UploadedFile f in RadUpload1.UploadedFiles)  
    { 
        string fileName = f.GetName();
        string title = f.GetFieldValue("Title");    
        bool createThumbnail = f.GetIsFieldChecked("Thumbnail");    
        ProcessFile(fileName, title, createThumbnail);  
    }
}


Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    For Each f As UploadedFile In RadUpload1.UploadedFiles
        Dim fileName As String = f.GetName()
        Dim title As String = f.GetFieldValue("Title")
        Dim createThumbnail As Boolean = f.GetIsFieldChecked("Thumbnail")
        ProcessFile(fileName, title, createThumbnail)
    Next
End Sub

See Also

In this article