Document Classification Showcase Demo Code Sample

Requirements
View Demo

Classify documents with custom-trained AI. This feature uses a specialized AI model to analyze documents and return a JSON output that identifies the document type. It supports multipage documents and is trained on 19 categories, primarily in English:

  • "advertisement"
  • "budget"
  • "email"
  • "file_folder"
  • "form"
  • "handwritten"
  • "id"
  • "invoice"
  • "letter"
  • "memo"
  • "news_article"
  • "passport"
  • "presentation"
  • "questionnaire"
  • "receipt"
  • "resume"
  • "scientific_publication"
  • "scientific_report"
  • "specification"

This demo allows you to:

  • Upload your own PDF file
  • Perform classification of the document
  • Produce a JSON report

Implementation steps
To add Document Classification capability in WebViewer:

Step 1: Choose your preferred web stack.
Step 2: Add the ES6 JavaScript sample code provided in this guide.

Once you generate your license key, it will automatically be included in your sample code below.

License Key

1// ES6 Compliant Syntax
2// GitHub Copilot - October 22, 2025
3// File name: document-classification/client/index.js
4
5const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
6
7// Global variables
8const element = document.getElementById('viewer');
9let instance = null;
10
11// Initialize WebViewer
12WebViewer({
13 path: '/lib',
14 initialDoc: 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/document_classification_pack.pdf',
15 enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
16 licenseKey: licenseKey,
17}, element).then((inst) => {
18 instance = inst;
19 instance.Core.documentViewer.addEventListener('documentLoaded', () => {
20 resultArea.textContent = "📄 Document loaded. You can now press the 'Classify Document' button to classify it.";
21 });
22});
23
24// Perform classification by sending the current PDF page to the server
25const classifyDoc = async () => {
26 instance.UI.openElements(['loadingModal']);
27 resultArea.textContent = '⏳ Classifying document, please wait...';
28 let resultText = '';
29 // Preparation of the PDF blob to be sent to the server
30 const doc = instance.Core.documentViewer.getDocument();
31// const currentPage = instance.Core.documentViewer.getCurrentPage();
32 const xfdfString = await instance.Core.annotationManager.exportAnnotations(); // obtaining annotations in the loaded document
33 const data = await doc.getFileData({ xfdfString });
34 const arr = new Uint8Array(data);
35 const blob = new Blob([arr], { type: 'application/pdf' });
36 const formData = new FormData();
37 formData.append(doc.filename, blob, doc.filename);
38 // Send the PDF blob to the server for processing
39 new Promise(function (resolve, reject) {
40 console.log('Sending PDF to server for processing...');
41 fetch(`http://localhost:5050/server/handler.js?filename=${doc.filename}`, {
42 method: 'POST',
43 body: formData,
44 }).then(function (response) {
45
46 if (response.status === 200) {
47 response.text().then(function (json) {
48 resultText = json;
49 resolve();
50 })
51 } else {
52 const errorText = `Server responded with status: ${response.status}`;
53 resultText = errorText + resultText;
54 console.error(resultText);
55 reject(new Error(`Server error: ${response.status}`));
56 }
57 }).catch(function (error) {
58 let errorText = 'Failed to connect to server: ' + error;
59 errorText += '\n Attempted URL: http://localhost:5050/server/handler.js';
60 errorText += '\n This likely means the Classification server is not running on port 5050';
61 console.error(errorText);
62 resultText = errorText + resultText;
63 reject(error);
64 });
65 }).catch(function (error) {
66 const errorText = ' Error in PDF upload promise: ' + error;
67 console.error(errorText);
68 resultText = errorText + resultText;
69 }).finally(function () {
70 resultArea.textContent = resultText;
71 instance.UI.closeElements(['loadingModal']);
72 });
73}
74
75// UI section
76
77// Create a container for the controls
78const controlsContainer = document.createElement('div');
79
80// Create 2 divs inside the container for left and right sections
81const leftDiv = document.createElement('div');
82const rightDiv = document.createElement('div');
83leftDiv.className = 'vertical-container left-panel'; // side-by-side divs using (display: inline-block) and (vertical-align: top)
84rightDiv.className = 'vertical-container right-panel';
85controlsContainer.appendChild(leftDiv);
86controlsContainer.appendChild(rightDiv);
87
88// Add description text to the left div
89const description = document.createElement('p');
90description.textContent = "A demo of Apryse Server SDK's Document Classification, powered by custom trained AI. The document will be analyzed and a resulting JSON will identify the document type. Supports multi page documents.";
91leftDiv.appendChild(description);
92leftDiv.appendChild(document.createElement('br'));
93
94// Add classify document button to the left div
95const classifyDocButton = document.createElement('button');
96classifyDocButton.className = 'btn';
97classifyDocButton.textContent = 'Classify Document';
98classifyDocButton.onclick = async () => {
99 await classifyDoc();
100};
101leftDiv.appendChild(classifyDocButton);
102
103leftDiv.appendChild(document.createElement('br'));
104leftDiv.appendChild(document.createElement('br'));
105
106const note = document.createElement('p');
107note.innerHTML = "<b>Note: only the first 2 pages will be processed</b>.";
108leftDiv.appendChild(note);
109
110const resultArea = document.createElement('textarea');
111resultArea.className = 'result-area';
112resultArea.readOnly = true;
113resultArea.textContent = "Classification result will appear here.";
114rightDiv.appendChild(resultArea);
115
116element.insertBefore(controlsContainer, element.firstChild);
117

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales