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

Preview PDF files before uploading with RadAsyncUpload


Product Version 2019.3.1023
Product RadAsyncUpload for ASP.NET AJAX


In the OnClientFileSelected and OnClientFileDropped events of RadAsyncUpload, a reference to the File can be accessed. That means we can convert it to base64 string and pass it to the PDF.js library and preview it.


<script src=""></script>

<canvas id="the-canvas" style="border: 1px  solid black"></canvas>

<script id="script">
    // The workerSrc property shall be specified.
    pdfjsLib.GlobalWorkerOptions.workerSrc = '';

    function previewPdfFile(file) {
        var fileReader = new FileReader();
        var base64;
        // Onload of file read the file content
        fileReader.onload = function (fileLoadedEvent) {
            base64 =;

            // atob() is used to convert base64 encoded PDF to binary-like data.
            // (See also
            // Base64_encoding_and_decoding.)
            var loadingTask = pdfjsLib.getDocument({ data: atob(base64.substring("data:application/pdf;base64,".length)) });
            loadingTask.promise.then(function (pdf) {
                // Fetch the first page.
                pdf.getPage(1).then(function (page) {
                    var scale = 1.5;
                    var viewport = page.getViewport({ scale: scale, });
                    // Prepare canvas using PDF page dimensions.
                    var canvas = document.getElementById('the-canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    // Render PDF page into canvas context.
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport,

        // Convert data to base64
    function OnClientFileSelected(sender, args) {
        var file = args.get_fileInputField().files[0]
        if (file.type == "application/pdf") {
    function OnClientFileDropped(sender, args) {
        var file = args.get_file();
        if (file.type == "application/pdf") {
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic"
    OnClientFileSelected="OnClientFileSelected" OnClientFileDropped="OnClientFileDropped">

See Also

In this article