How to restrict file picker to PDF files only in WebViewer

Technical Support WebViewer
1

Hello Apryse Support Team,

I need guidance on how to properly restrict the WebViewer file picker to show only PDF files when users open documents.

Current Implementation:

WebViewer(
    {
        path: './assets/lib',
        licenseKey: environment.apryseKey,
        extension: 'pdf',
        fullAPI: true,
    },
    this.viewerRef.nativeElement,
)

Issue: I initially tried using the extension parameter thinking it would limit the file picker, but after reviewing the documentation, I understand that extension is used to specify the file type of documents being loaded programmatically (especially useful for multi-tab scenarios with initialDoc).

Current Behavior: The file picker currently shows both PDF files and image files when users attempt to open documents.

Question: What is the correct way to configure WebViewer so that the file picker (when users click “Open” or similar file selection options) only displays PDF files and filters out other file types like images, Word documents, etc.?

Thank you for your assistance.
Best regards,
William

3

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems like you’re trying to restrict the file picker in WebViewer to only display PDF files. Unfortunately, WebViewer’s built-in file picker does not currently support filtering files by type directly. However, you can implement a custom file input element and filter files before they are loaded into WebViewer.

Some things you can try:

  • Create a custom file input element using HTML and JavaScript.

  • Use the “accept” attribute in the HTML input tag to specify that only PDF files should be selectable (e.g., accept=".pdf").

  • Listen for the file input change event and check the file type before passing it to WebViewer’s loadDocument method.

  • Ensure that your custom input element is styled and positioned to match the look and feel of WebViewer’s UI for a seamless user experience.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

4

Hi,

Any updates on this?

Thanks!

5

Hello William,

Thank you for contacting Apryse Forums.

What you can do is create your own choose file button that restricts file types. This is similar to our viewing sample here:

This restriction is placed on the input element.

// accept only pdfs
<input
  type="file"
  accept=".pdf"
/>

Best Regards,
Darian