Superflows Document Analyzer
This tutorial is designed for developers who want to integrate the Superflows Document Analyzer into their web applications. The library integrates with HTML. With just three straightforward steps—installation, embedding, and result-extraction, developers can seamlessly incorporate document analysis into their applications. Furthermore, the analyzer supports asynchronous workflows, enabling developers to effortlessly dispatch analysis results to webhook URLs. This streamlined approach not only saves time but also empowers developers to enhance their applications efficiently and effectively.
How It Works
Step 1 - Install the library in the page header.
Step 2 - Use it in the HTML code.
Step 3 - Receive the analysis and validation results.
Step 1 - Installation
Include Javascript
Add the following script tag to import the necessary JavaScript files:
<script type="module">
import {LitElement, html, css} from 'https://esm.run/lit-element/lit-element.js';
import {SfIUploader} from 'https://esm.run/sf-i-uploader@1.0.68/sf-i-uploader.js';
import {SfIElasticText} from 'https://esm.run/sf-i-elastic-text/sf-i-elastic-text.js';
</script>
Include CSS
Add the required CSS files to style the analyzer:
Uploader CSS
The vanilla stylesheet is available here.Supporting CSS
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet"/>
Step 2 - Usage
Once the library is installed, you can easily integrate the document analyzer into your HTML forms. Show the analyzer to begin analyzing documents. For instance, place the following code within your HTML form to enable document analysis.
Users can then select a document for analysis.
Step 3 - Extract the results
After the analysis completes, the results can be extracted using two methods.
Method 1 - Javascript call
Use the selectedValues()
function to extract the results. For e.g., invoke this function from the from validation function in your form submission workflow.
Method 2 - Via A Webhook
Use this method to implement an asynchronous workflow. Provide the callbackUrlHost
and the callbackUrlPath
arguments. If these arguments are provided the analyzer constructs the webhook url as https://callbackUrlhost/callbackUrlPath
and dispatches the analysis results to it after completion.
To ensure proper integration, replace callbackUrlHost
and callbackUrlPath
with the actual hostname and path of your webhook endpoint. In the example provided, the constructed webhook URL will be https://abc.net/processresult
.
Demo
Check out the live demo on StackBlitz for a quick demonstration.
Use Cases
Restrict file types
Specify the allowed file types by setting the allowedExtensions
variable. In the example provided below, only png and jpg file types will be accepted.
Restrict file size
Specify the maximum allowed file size by setting the maxSize
variable. In the example provided below, the maximum allowed file size is set to 50 KB.
Validate various document types
Specify the document type for validation by setting the docType
variable. The example below validates the uploaded document against the aadhar document type.
Implement asynchronous flow using a webhook
Specify your webhook URL by setting the callbackUrlHost
and the callbackUrlPath
parameters. If these arguments are provided the analyzer constructs the webhook url as https://callbackUrlhost/callbackUrlPath
and dispatches the analysis results to it after completion. In the example provided, the constructed webhook URL will be https://abc.net/processresult
.
<sf-i-uploader
docType="aadhar"
callbackUrlHost="abc.net"
callbackUrlPath="processresult">
</sf-i-uploader>
Reference
Arguments
Argument | Mandatory | Datatype | Description | Allowed Values & Examples | Default Value |
---|---|---|---|---|---|
apiId | yes | alphanumeric string | Api key | 1peg5170d3 is the value for the free plan. For a pro plan, you will receive a personalized key | "qegqubqm14" |
allowedExtensions | no | encoded json array string | JPG, PNG and PDF files are supported. This array allows you to enable / disable / choose one or more of these. | ["jpg","png","pdf"] will allow all three extensions. ["jpg"] will only allow the PDF extension. | "["jpg","png","pdf"]" |
docType | no | string | Code for the document type validation | "aadhar" for Aadhar card, "pan" for PAN card. The entire document type code reference is available here. | "" |
maxSize | no | string | Maximum allowed fize size | "51200" for 50KB | "512000" |
callbackUrlHost | no | url string | If provided, the uploader calls the https://callbackUrlHost/callbackUrlPath a payload containing the upload and processing result. | "example.com" for callbackUrlHost and "processresult" for callbackUrlPath results in a webhook call to https://example.com/processresult. | |
callbackUrlPath | no | url path string | If provided, the uploader calls the https://callbackUrlHost/callbackUrlPath with a payload containing the upload and processing result. | "example.com" for callbackUrlHost and "processresult" for callbackUrlPath results in a webhook call to https://example.com/processresult. | |
dataPassthrough | no | encoded json object string | The payload specific to your use-case, which you wish to receive at the webhook. The uploader calls https://callbackUrlHost/callbackUrlPath webhook with a payload containing the upload and processing result. If provided, the dataPassthrough object is attached with the payload as well. | Upto you. Maximum permissible size is 500 KB. | "{}" |
Functions
Functions | Returntype | Description |
---|---|---|
selectedValues() | json array object | Returns the results of the document analysis. |
Document Types
Type | Code | Description |
---|---|---|
Aadhar | "aadhar" | Aadhaar by UIDAI is a 12-digit unique identification number issued to residents of India based on their biometric and demographic data. |
PAN | "pan" | PAN (Permanent Account Number) is a unique alphanumeric identifier issued by the Income Tax Department of India to individuals and entities for tracking financial transactions and filing taxes. |
Voter ID | "voterid" | Voter ID, issued by the Election Commission of India (ECI), is a unique identification card that enables eligible Indian citizens to participate in the electoral process by casting their votes in elections. |
Passport (India) | "passportin" | The Indian passport is an official document issued by the Government of India, serving as proof of nationality and identity for international travel. |
Income Tax Return Acknowledgement (India) | "itrack" | The Income Tax Return Acknowledgement (India) is an official document issued by the Income Tax Department of Government of India, serving as proof of filing of income tax return. |
Tax Deducted at Source Certificate(India) | "tdscert" | The Tax Deducted at Source Certificate (India) is an official document issued by the TDS centralized processing cell of the Income Tax Department of Government of India, serving as proof of TDS paid to government. |
FORM GSTR-1 (India) | "gstr1" | The FORM GSTR-1 (India) is an official document issued by the Goods and Services Tax (GST) Authority of Government of India, serving as proof of monthly GST paid to the government. |
FORM GSTR-3B (India) | "gstr3b" | The FORM GSTR-3B (India) is an official document issued by the Goods and Services Tax (GST) Authority of Government of India, serving as proof of quarterly GST paid to the government. |