Thumbnail Controls

The left side panel has a thumbnail tab that can be used to perform a number of different page operations.

Users can hold the "CTRL" or "Command" key and click on a thumbnail to select it. The text input near the bottom of the thumbnail panel can also be used to select pages. After pages are selected, the controls at the bottom of the thumbnail panel can be used to delete or extract the currently selected pages.

This feature can be disabled by using the disableFeatures API to disable the ThumbnailMultiselect feature.

WebViewer({
  ... // other options
}, viewerElement)
  .then(instance => {
    instance.UI.disableFeatures([instance.Feature.ThumbnailMultiselect]);
  });

The current page can be rotated using the buttons below the thumbnail.

The current pages can be deleted using the button below the thumbnail. There is also a button at the bottom of the thumbnail panel that can be used to delete the currently selected pages.

Users can drag and drop each of the thumbnails to move a page. Users can also drag and drop multiple selected pages to move them all at once.

This feature can be disabled by using the disableFeatures API to disable the ThumbnailReordering feature.

Simply drag and drop a document into the thumbnail panel to merge a new document into the currently opened document.

This feature can be disabled by using the disableFeatures API to disable the ThumbnailMerging feature.

It is possible to merge pages from one instance of WebViewer into another using the thumbnail panel. Users can drag and drop one or more pages from the thumbnail panel of one instance of WebViewer into another.

Unlike other features, this feature is disabled by default for performance. This feature can be enabled by using enableFeatures API to enable the MultipleViewerMerging feature.

Below is an example of pages being moved between instances of WebViewer.

You can also check-out a ready-to-go sample for a dropzone implementation.

You can get the selected pages by using getSelectedThumbnailPageNumbers. To select pages programmatically use selectThumbnailPages.