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

Access selected file in the arguments of OnClientFileSelected event of AsyncUpload

Problem

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

Description

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.

Solution

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;
    this._selectedFilesCount++;

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

    this._marshalUpload(row, fileName, shouldAddNewInput);

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

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

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

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