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

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 will be discontinued in June 2013 (Q2’13), although it will 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.

The following table lists the important RadUpload client-side methods:

 

Name

Parameters

Return Type

Description

addFileInput

none

none

Adds a new row to the RadUpload control.

CopyASPX
<telerik:radupload runat="server" id="RadUpload1" controlobjectsvisibility="None" />
<input type="button" value="Add" onclick="myAdd()" />

<script type="text/javascript">
    function myAdd() {
        $find("<%= RadUpload1.ClientID %>").addFileInput();
    }
</script>
 

addFileInputAt

integer

none

Adds a new row to the RadUpload control at the specified (0-based) location.

CopyASPX
<telerik:radupload runat="server" id="RadUpload1" controlobjectsvisibility="None" />
<input type="button" value="Add" onclick="myAdd()" />
<script type="text/javascript">
    function myAdd() {
        $find("<%= RadUpload1.ClientID %>").addFileInput(0);
    }
</script>
 

appendCheckBox

row

none

Appends a check box to the specified row. This method is useful for customizing the order of control elements.

CopyASPX
<script type="text/javascript">
    function PutCheckBoxOnRight(upload, arguments) {
        upload.appendCheckBox(arguments.get_row());
    }
</script>
<telerik:radupload id="RadUpload1" runat="server" controlobjectsvisibility="AddButton, DeleteSelectedButton"
    onclientadded="PutCheckBoxOnRight" />
 

appendClearButton

row

none

Appends a clear button to the specified row.This method is useful for customizing the order of control elements.

CopyASPX
<script type="text/javascript">
    function AddClearButton(upload, arguments) {
        upload.appendClearButton(arguments.get_row());
    }
</script>

<telerik:radupload id="RadUpload1" runat="server" controlobjectsvisibility="AddButton, DeleteSelectedButton"
    onclientadded="AddClearButton" />
 

appendRemoveButton

row

none

Appends a remove button to the specified row.This method is useful for customizing the order of control elements.

CopyASPX
<script type="text/javascript">        

    function AddRemoveButton(upload, arguments) { upload.appendRemoveButton(arguments.get_row()); }
    // #region client-side-radupload_5

    function clearAllInputs() {
        var upload = $find("<%= RadUpload1.ClientID %>");
        var fileInputs = upload.getFileInputs();
        for (var i = fileInputs.length - 1; i >= 0; i--) {
            upload.clearFileInputAt(i);
        } 
    }

    // #endregion

    // #region client-side-radupload_6

    function DeleteInvalidInputs() {
        var ul = $find("<%= RadUpload1.ClientID %>");
        var inputs = ul.getFileInputs();
        for (i = inputs.length - 1; i >= 0; i--) {
            if (!ul.isExtensionValid(inputs[i].value))
                ul.deleteFileInputAt(i);
        } 
    }

    // #endregion

    // #region client-side-radupload_8

    function ClearInvalidInputs() {
        var ul = $find("<%= RadUpload1.ClientID %>");
        var inputs = ul.getFileInputs();
        for (i = inputs.length - 1; i >= 0; i--) {
            if (!ul.isExtensionValid(inputs[i].value))
                ul.clearFileInputAt(i);
        }
    }

    // #endregion

    // #region client-side-radupload_10

    function ClearInvalidInputs() {
        var ul = $find("<%= RadUpload1.ClientID %>");
        var inputs = ul.getFileInputs();
        for (i = inputs.length - 1; i >= 0; i--) {
            if (!ul.isExtensionValid(inputs[i].value)) 
                ul.clearFileInputAt(i);
        }
    }

    // #endregion
</script>
<telerik:radupload id="RadUpload1" runat="server" controlobjectsvisibility="AddButton"
    onclientadded="AddRemoveButton" />
 

clearFileInputAt

integer

none

Clears the file input area in the specified (0-based) row. This method is useful for clearing all inputs in response to a cancel button, or clearing invalid inputs.

CopyJavaScript
function clearAllInputs() {
    var upload = $find("<%= RadUpload1.ClientID %>");
    var fileInputs = upload.getFileInputs();
    for (var i = fileInputs.length - 1; i >= 0; i--) {
        upload.clearFileInputAt(i);
    } 
}
 

deleteFileInputAt

integer

none

Deletes the row at the specified (0-based) index if it exists.

CopyJavaScript
function DeleteInvalidInputs() {
    var ul = $find("<%= RadUpload1.ClientID %>");
    var inputs = ul.getFileInputs();
    for (i = inputs.length - 1; i >= 0; i--) {
        if (!ul.isExtensionValid(inputs[i].value))
            ul.deleteFileInputAt(i);
    } 
}
 

deleteSelectedFileInputs

none

none

Deletes all selected rows.

CopyASPX
<telerik:radupload id="RadUpload1" runat="server" controlobjectsvisibility="CheckBoxes, AddButton" />
<input type="button" value="Delete Selected" onclick="myDelete()" />
<script type="text/javascript">
    function myDelete() {
        $find("<%= RadUpload1.ClientID %>").deleteSelectedFileInputs();
    }
</script>
 

getFileInputs

none

Array

Returns an array containing the DOM elements for all file input elements.

CopyJavaScript
function ClearInvalidInputs() {
    var ul = $find("<%= RadUpload1.ClientID %>");
    var inputs = ul.getFileInputs();
    for (i = inputs.length - 1; i >= 0; i--) {
        if (!ul.isExtensionValid(inputs[i].value))
            ul.clearFileInputAt(i);
    }
}
 

getID

string

string

Creates a new ID, based on the RadUpload ClientID and the supplied parameter. This method must be used when adding custom fields to a RadUpload instance.

CopyASPX
<telerik:radupload runat="server" id="RadUpload1" onclientadded="addTitle" />
<script type="text/javascript">
    function addTitle(radUpload, args) {
        var row = args.get_row();
        var title = document.createElement("input");
        title.id = title.name = radUpload.getID("title");
        row.insertBefore(title, row.firstChild);
    }
</script>
 

isExtensionValid

string

boolean

Validates the extension of the file name that is passed as a parameter.

CopyJavaScript
function ClearInvalidInputs() {
    var ul = $find("<%= RadUpload1.ClientID %>");
    var inputs = ul.getFileInputs();
    for (i = inputs.length - 1; i >= 0; i--) {
        if (!ul.isExtensionValid(inputs[i].value)) 
            ul.clearFileInputAt(i);
    }
}
 

validateExtensions

none

boolean

Returns whether the client-side validation of the selected file names succeeded.

CopyASPX
<telerik:radupload runat="server" id="RadUpload1" allowedfileextensions=".zip,.cab" />
<asp:CustomValidator runat="server" ID="CustomValidator1" Display="Dynamic" ClientValidationFunction="ValidateRadUpload1">
  Invalid extensions.
</asp:CustomValidator>
<asp:Button runat="server" ID="Upload" Text="Upload" />
<script type="text/javascript">
    function validateRadUpload1(source, arguments) {
        arguments.IsValid = $find("<%= RadUpload1.ClientID %>").validateExtensions();
    }
    // #region client-side-radupload_12

    function AllowJPEGExtension() {
        var update = $find("<%= RadUpload1.ClientID %>");
        if (!update.isExtensionValid(".jpeg")) {
            var exts = update.get_allowedFileExtensions();
            exts[exts.length] = ".jpeg";
        }
    }

    // #endregion
</script>
 

get_maxFileCount

none

integer

Returns the maximum number of rows in the RadUpload control.

 

set_maxFileCount

integer

none

Sets the maximum number of rows in the RadUpload control.

 

get_initialFileInputsCount

none

integer

Returns the initial number of rows when the RadUpload control is first loaded.

 

get_allowedFileExtensions

none

Array

Returns an array containing the allowed file extensions.

CopyJavaScript
function AllowJPEGExtension() {
    var update = $find("<%= RadUpload1.ClientID %>");
    if (!update.isExtensionValid(".jpeg")) {
        var exts = update.get_allowedFileExtensions();
        exts[exts.length] = ".jpeg";
    }
}
 

get_element

none

HTML Element

Returns the DOM element for the RadUpload control.

See Also