SmartExtract API Examples

Data Extraction Example

import { SmartExtact } from '@clik-ai/smart-extract';

const smex = new SmartExtract({ baseUrl: appPath });

// Instead of assigning to a global variable you'll need to persist
// the extracted data in a DB
let extractedData = null;

// SmartExtract needs the input file to be encoded as a Data URL.
// You may have your users select a file in browser and encode it as a Data URL
// or you may get the file as Data URL from an API
// See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
async function sendExtractionRequest() {
  const { fileDataUrl, fileName } = await getFileData();
  
  smex.sendExtractDocumentRequest({
    file: fileDataUrl,
    fileName: file.name,
  });
}

// Ready event handler
function onReady() {
  console.log('SmEx is now ready to take extraction requests');
  sendExtractionRequest();
}

// Data event handler
function onData(event: CustomEvent) {
  console.log('User pressed "Save" button in spreadsheet view');
  console.log('Extracted Data: ', event.detail)
  extractedData = event.detail; 
  
  // You may choose to end the session right after user saves data
  // Or, you may choose to leave the session as is and end session
  // on some other external event. This way your users may keep saving
  // data while working with it.
  endSession();
}

// Cancel event handler
function onCancel() {
  console.log('User pressed "Cancel" button in spreadsheet view');
  // End session to clean up event listeners and remove iframe from DOM
  endSession();
}

// Add event handlers
smex.addEventListener('ready', onReady);
smex.addEventListener('data', onData);
smex.addEventListener('cancel', onCancel);

// Cleanup event handlers and end SmartExtract session
function endSession() {
  smex.removeEventListener('ready', onReady);
  smex.removeEventListener('data', onData);
  smex.removeEventListener('cancel', onCancel);
  smex.endSession();
}

// Get auth token and start SmartExtract session
getAuthToken().then((token) => {
  smex.startSession(
    document.getElementById('smex-wrapper-div'),
    token,
    {
      // for multi-extraction
      // multiple: true,
    }
  );
});

Edit Extracted Data Example

Disable Retry Flow and Handle Error

SmartExtract by default triggers a retry flow in case data extraction for a document fails. In case user provided some meta information incorrectly, this gives them a chance to re-fill the form and try extraction again. However, if you want to handle error within client application you may disable the retry flow as:

When you set the disableRetry flag as true SmartExtract will instead trigger an error event to notify that data extraction has failed. You can add a listener for the error events as:

Styling and Customisations

SmartExtract provides various options so that you can style different elements on the SmartExtract component to match the look and feel of your application. Following are complete type definition for all the customisation options that you can provide:

PreviousCode ExamplesNextSmartExtractSimple API Examples

Last updated