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

Preview uploaded image with RadAsyncUpload


Preview the image file selected for upload with RadAsyncUpload. 
AsyncUpload Preview Image


To get access to the file that will be uploaded, we can get the file from the file input in the OnClientFileSelected event of the RadAsyncUpload. In order to be able to access the file when it is dropped on the AsyncUpload control, we need to apply the workaround suggested in Access selected file in the arguments of OnClientFileSelected event of AsyncUpload KB article.

Once we accessed the file, we can use a FileReader to read the file as a DataURL as suggested in the following StackOverflow forum: Preview an image before it is uploaded.

Then, in the load event of the FileReader, we can assign the DataURL as the value of the src attribute of our <img> preview element.

As a final touch, we can assign an initial "No preview available image" for the <img> preview element and reset it when the file is removed from the AsyncUpload in the OnClientFileUploadRemoved event.

    /* the preview image element should not exceed the following size */
    #preview-image {
        max-height: 300px;
        max-width: 300px;
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" AllowedFileExtensions=".jpg,.jpeg,.png,.gif" OnClientFileUploadRemoved="OnClientFileUploadRemoved" OnClientFileSelected="OnClientFileSelected"></telerik:RadAsyncUpload>

<img src="" id="preview-image" alt="Preview image here"  />
    function OnClientFileUploadRemoved(sender, args) {
        $telerik.$("#preview-image").attr('src', "");

    function OnClientFileSelected(sender, args) {
        var file = args.get_file();
        if (file) {
            var reader = new FileReader();

            reader.onload = function (e) {


    Telerik.Web.UI.RadAsyncUpload.prototype._onFileSelected = function (row, fileInput, fileName, shouldAddNewInput, file) {
        var args = {
            row: row,
            fileInputField: fileInput,
            file: file
        args.rowIndex = $telerik.$(row).index();
        args.fileName = fileName;
        shouldAddNewInput = shouldAddNewInput &&
            (this.get_maxFileCount() == 0 || this._selectedFilesCount < this.get_maxFileCount());
        this._marshalUpload(row, fileName, shouldAddNewInput);
        var labels = $telerik.$("label", row);
        if (labels.length > 0)
        $telerik.$.raiseControlEvent(this, "fileSelected", args);
In this article