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

Access selected file in the arguments of OnClientFileSelected event of AsyncUpload


Files are not available in the OnClientFileSelected event of the RadAsyncUpload.


Having the files available in the arguments of the event could be useful when the file is needed for some processing on the client before uploading. Few examples are:

  • Preview an image prior uploading;

  • Additional validation to determine should the upload of the file should be terminated.


Overriding the private _onFileSelected function to pass the file would make it accessible in the OnClientFileSelected event handler via args.get_file() method.

Placing the following workaround below the ScriptManager should enable the file access via the arguments:

var $ = $ || $telerik.$;
Telerik.Web.UI.RadAsyncUpload.prototype._onFileSelected = function (row, fileInput, fileName, shouldAddNewInput, file) {
    var args = {
        row: row,
        fileInputField: fileInput,
        file: file

    args.rowIndex = $(row).index();
    args.fileName = fileName;

    shouldAddNewInput = shouldAddNewInput &&
        (this.get_maxFileCount() == 0 || this._selectedFilesCount < this.get_maxFileCount());

    this._marshalUpload(row, fileName, shouldAddNewInput);

    var labels = $("label", row);
    if (labels.length > 0)

    $.raiseControlEvent(this, "fileSelected", args);

Then, in the OnClientFileSelected event, the file should be accessible as follows:

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientFileSelected="OnClientFileSelected" />
    function OnClientFileSelected(sender, args) {
        var file = args.get_file();
        if (file) {
            // use the file
In this article