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 });

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>

See more in loading options

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales