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:

Feature option

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

WebViewer(...)
  .then(instance => {
    const { Feature } = instance.UI;
    instance.UI.enableFeatures([UI.Feature.FilePicker]);
  });

UI.enableFeatures Feature

Constructor option

You can also specify this via the WebViewer constructor at the very beginning.

WebViewer({
  ...
  enableFilePicker: true,
}).then(instance => {
    // ...
  });

WebViewer Options

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

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.

JavaScript (SDK v8.0+)

<label for="file_upload">Choose A file</label>
<input type="file" id="file_upload" name="file_upload" accept=".pdf">

<div id='viewer' style='width: 1024px; height: 600px;'></div>

<script>
  const input = document.getElementById('file_upload');

  WebViewer(...)
    .then(instance => {
      input.addEventListener('change', () => {

        // Get the file from the input
        const file = input.files[0];
        instance.UI.loadDocument(file, { filename: file.name });
      });

      const { documentViewer } = instance.Core;
      documentViewer.addEventListener('documentLoaded', () => {
        // perform document operations
      });
    });
</script>

UI.loadDocument

JavaScript (SDK v6.0+)

<label for="file_upload">Choose A file</label>
<input type="file" id="file_upload" name="file_upload" accept=".pdf">

<div id='viewer' style='width: 1024px; height: 600px;'></div>

<script>
  const input = document.getElementById('file_upload');

  WebViewer(...)
    .then(instance => {
      input.addEventListener('change', () => {

        // Get the file from the input
        const file = input.files[0];
        instance.loadDocument(file, { filename: file.name });
      });

      const { docViewer } = instance;
      docViewer.on('documentLoaded', () => {
        // perform document operations
      });
    });
</script>

WebViewerInstance.loadDocument

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.