Skip to content

Events

You can subscribe to the component events.

For example:

const documentReaderComponent = document.querySelector('document-reader'); 
const cameraSnapshotComponent = document.querySelector('camera-snapshot');
documentReaderComponent.addEventListener('document-reader', (event) => console.log(event.detail)); // Event listener for document-reader component.
cameraSnapshotComponent.addEventListener('camera-snapshot', (event) => console.log(event.detail)); // Event listener for camera-snapshot component.

The document-reader type of event is generated for the document-reader component, and camera-snapshot type of event is generated for the camera-snapshot component.

The generated event object (event.detail) contains three fields that describe the event:

{
  action: "PRESS_CAMERA_BUTTON", // the type of action that generated the event (all actions are described in the table below)
  data: null, // component data
  manual: true // event generated by user action or component by itself
}

Type of actions:

Type of action Description of the action In which component is present
ELEMENT_VISIBLE Component is appended in the DOM. document-reader, camera-snapshot
PRESS_CAMERA_BUTTON The "From camera" button is pressed. document-reader, camera-snapshot
PRESS_FILE_BUTTON The "From gallery" button is pressed. document-reader, camera-snapshot
PRESS_RETRY_BUTTON The "Retry" button is pressed. document-reader, camera-snapshot
PRESS_SKIP_BUTTON The "Skip" button is pressed. document-reader
CLOSE The "Close" button is pressed. document-reader, camera-snapshot
PROCESS_FINISHED The component has finished its work. document-reader, camera-snapshot
SERVICE_INITIALIZED The component has started its work. document-reader

In cases of successful operation of the components, the data field will contain the following fields:

{
  response: { ... }, // component result
  status: 1 // 1 for successful work and 0 for unsuccessful
}

In cases of unsuccessful work, the data field will contain the following fields:

{
  reason: "CAMERA_PERMISSION_DENIED", // error reason (possible causes of errors are described in the table below)
  status: 0
}

Table of error causes:

Reason Description of the reason
WASM_ERROR Error in WASM.
WASM_LICENSE Missing or incorrect license.
FILE_SIZE The file size is too large.
INCORRECT_FILE Problems with reading the file.
UNKNOWN_ERROR Unknown error.
NOT_SUPPORTED The browser is not supported.
CAMERA_UNKNOWN_ERROR Unknown camera error.
CAMERA_PERMISSION_DENIED Access to the camera is prohibited.
NO_CAMERA There is no camera.
CONNECTION_ERROR Connection errors.

The table below describes the cases of event generation:

Event condition Event type Event object ```event.detail``` Description
The component is mounted in the DOM. For document-reader: ```document-reader``` For camera-snapshot: ```camera-snapshot```
{
  action: "ELEMENT_VISIBLE", 
  data: null,
  manual: true
}
To receive this event, you must wrap the component in another element (for example, a div) and add an addEventListener to it. When the component appears in the DOM, the event will pop up. Example:
<div id="add-event-listener-to-this-element">
  <document-reader></document-reader>
</div>
The "From camera" button is pressed. For document-reader: ```document-reader``` For camera-snapshot: ```camera-snapshot```
{
  action: "PRESS_CAMERA_BUTTON", 
  data: null,
  manual: true
}
The "From gallery" button is pressed. For document-reader: ```document-reader``` For camera-snapshot: ```camera-snapshot```
{
  action: "PRESS_FILE_BUTTON", 
  data: null,
  manual: true
}
The "Retry" button is pressed. For document-reader: ```document-reader``` For camera-snapshot: ```camera-snapshot```
{
  action: "PRESS_RETRY_BUTTON", 
  data: null,
  manual: true
}
The "Skip page" button is pressed. ```document-reader```
{
  action: "PRESS_SKIP_BUTTON", 
  data: null,
  manual: true
}
This event available only in ```document-reader```.
The "Close" button is pressed. For document-reader: ```document-reader``` For camera-snapshot: ```camera-snapshot```
{
  action: "CLOSE", 
  data: null,
  manual: true
}
The work of the component is completed successfully. For document-reader: ```document-reader``` For camera-snapshot: ```camera-snapshot```
{
  action: "PROCESS_FINISHED", 
  data: {
    response: { ... },
    status: 1
  },
  manual: false
}
The work of the component failed. For document-reader: ```document-reader``` For camera-snapshot: ```camera-snapshot```
{
  action: "PROCESS_FINISHED", 
  data: {
    reason: "An error has occurred",
    status: 0
  },
  manual: false
}
Component is initialized and ready to work. ```document-reader```
{
  action: "SERVICE_INITIALIZED",
  data: null,
  manual: false
}
This event available only in ```document-reader```.