Section:

Open a document from file system

Opening a document in WebViewer from file system

Enable File Browser Option

If you wish to allow users to open files from their local file system, you can enable this feature with:

You can enable the file picker with Features at any point in time.

JavaScript (SDK v8.0+)

1WebViewer(...)
2  .then(instance => {
3    const { Feature } = instance.UI;
4    instance.UI.enableFeatures([UI.Feature.FilePicker]);
5  });

Related Links

And this option will be available to users in the top-right of the WebViewer UI:

Apryse Docs Image

With a File Object

If you have the File object, from a file picker for example, you can pass the object directly to the loadDocument function. File objects are similar to Blobs and should load fine.

1<label for="file_upload">Choose A file</label>
2<input type="file" id="file_upload" name="file_upload" accept=".pdf">
3
4<div id='viewer' style='width: 1024px; height: 600px;'></div>
5
6<script>
7  const input = document.getElementById('file_upload');
8
9  WebViewer(...)
10    .then(instance => {
11      input.addEventListener('change', () => {
12
13        // Get the file from the input
14        const file = input.files[0];
15        instance.UI.loadDocument(file, { filename: file.name });
16      });
17
18      const { documentViewer } = instance.Core;
19      documentViewer.addEventListener('documentLoaded', () => {
20        // perform document operations
21      });
22    });
23</script>

Related Links

Loading Options

WebViewer provides various options to load a document. Whether you are loading a document through the initialDoc option in the constructor or calling loadDocument after mounting, you can always provide options to load your document.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales