Access selected file in the arguments of OnClientFileSelected event of AsyncUpload

RELATED TO:

AUTHOR: Peter Milchev

DATE POSTED: April 02, 2018

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>

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Demos

    Browse 1,200+ demos with source code covering basic and advanced scenarios.

  • Sample Applications

    Learn how to integrate the controls in real-world examples.

  • Feedback Portal

    Vote and follow the features you want to see added to Telerik UI for ASP.NET AJAX.

  • User Voice

    Get answers directly from the people who build the product.

  • Documentation

    Benefit from detailed help articles and API references for all controls.

  • Knowledge Base

    Learn how to achieve common scenarios from a multitude of tutorials and working examples.

  • Code Library

    Browse sample projects submitted by Telerik staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.