How to Hide Upload Component in TelerikPdfViewer

Environment

Product

PdfViewer for Blazor

Description

When using the TelerikPdfViewer for Blazor, upload controls may still be visible while a PDF file is loading, even if the EnableLoaderContainer parameter is set to false.

This knowledge base article also answers the following questions:

• How to prevent interaction with Upload component while a PDF is loading in TelerikPdfViewer?
• How to hide Upload and DropZone components in TelerikPdfViewer until the PDF file is fully loaded?
• How to use custom CSS with TelerikPdfViewer to hide Upload component?

Solution

To control the visibility of Upload component and its dropzone in the TelerikPdfViewer while a PDF is loading, apply custom CSS to hide the upload controls. To achieve that, use the OnOpen event to apply a CSS class with the required styles that hide the controls until the PDF file is loaded successfully.

<TelerikPdfViewer Data="@PdfSource"
                  Height="600px"
                  EnableLoaderContainer="false"
                  OnOpen="@OnPdfOpen"
                  Class="@PdfClass">
</TelerikPdfViewer>
<style>
    .hide-pdf-upload .k-external-dropzone {
        display: none;
    }

    .hide-pdf-upload .k-upload {
        display: none;
    }
</style>
@code {
    private byte[] PdfSource { get; set; }
    private string PdfClass { get; set; } = "";

    private async Task OnPdfOpen(PdfViewerOpenEventArgs args)
    {
        //hide Upload component
        PdfClass = "hide-pdf-upload";
    }
}

See Also

• TelerikPdfViewer Overview
• TelerikPdfViewer Events