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

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales