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

Displaying PDF Preview on File Selection with RadAsyncUpload

Updated on Oct 28, 2025

Environment

Product	AsyncUpload for ASP.NET AJAX
Version	All

I need to display a PDF preview immediately after selecting a file in RadAsyncUpload. The PDF content must be shown before the file upload event is triggered, and other instructions are executed during the upload process.

This knowledge base article also answers the following questions:

How to show a PDF preview when selecting a file in RadAsyncUpload?
How to use FileReader API with RadAsyncUpload for PDF preview?

Solution

To display a PDF preview immediately after file selection in RadAsyncUpload, use the FileReader API in combination with the OnClientFileSelected event. RadAsyncUpload does not provide built-in PDF preview functionality before upload, but this method allows you to achieve the desired behavior.

Configure RadAsyncUpload with the OnClientFileSelected event.
Override the private _onFileSelected function to access the file object in the client-side event.
Use the FileReader API to read the selected PDF file.
Display the PDF content in an <iframe> for preview.

ASP.NET

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientFileSelected="previewPdfOnSelect" />
<telerik:RadSlidingPane ID="PaneAnteprima" runat="server" Title="Anteprima File" DockOnOpen="True">
    <iframe id="pdfPreview" style="width: 100%; height: 600px;"></iframe>
</telerik:RadSlidingPane>

JavaScript

// Override to make the file accessible in OnClientFileSelected event
Telerik.Web.UI.RadAsyncUpload.prototype._onFileSelected = function (row, fileInput, fileName, shouldAddNewInput, file) {
    let 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);
    let labels = $("label", row);

    if (labels.length > 0) labels.remove();

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

function previewPdfOnSelect(sender, args) {
    let file = args.get_file();

    if (file?.type === "application/pdf") {
        let reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById("pdfPreview").src = e.target.result;
        };

        reader.readAsDataURL(file);
    }
}

This solution ensures that the PDF content is displayed immediately after file selection without triggering the upload event.

Displaying PDF Preview on File Selection with RadAsyncUpload

Environment

Description

Solution

See Also