File Upload

File Upload is used to upload any type of document

Properties

Value "expression"

The binding for the component. Use an appropriate expression to bind the component to its value and specify where the value is saved/read.

For example, use '{{myVariableName}}' to store the value of the component in a variable named 'myVariableName'

Use prefixes to define the scope of the value.

For example, 'root.' for referencing the root case to store the value in or 'parent.' to store the value in the parent work item of the current one.

📘

Please refer to the section 'Frontend expressions' in the Flowable guide for more information.

After uploading the files, they will be saved in this variable as an array of objects. If the file has been uploaded successfully or if there has been an error due to size issues or any other reason, the file object will have a different format, including the error property or the successful file base64. You can check here the difference between both:

  • Successfully uploaded file format:

📘

The file will retrieve the fileBase64 property to be able to upload it to the API.

[
  {
    "path": "./image-name.jpg",
    "relativePath": "./image-name.jpg",
    "lastModified": 1213423412342,
    "lastModifiedDate": "2021-01-01T12:00:00.000Z",
    "name": "image-name.jpg",
    "size": 1234121,
    "type": "image/jpg",
    "fileBase64": "/sdfsd/SdSADF/sdfasdfasd/ASDFsdfsdfsadf",
    "documentSection": ""
	}
]
  • Rejected file format:
[
  {
    "path": "./image-name.jpg",
    "relativePath": "./image-name.jpg",
    "lastModified": 1213423412342,
    "lastModifiedDate": "2021-01-01T12:00:00.000Z",
    "name": "image-name.jpg",
    "size": 1234121,
    "type": "image/jpg",
    "fileBase64": "",
    "documentSection": "",
    "error": {
    	"code": "error_max_size",
    	"message": "File size cannot exceed 10MB"
    }
  }
]

ℹ️ The errorcan have different codes:

CodeMessage propertyDefault message
error_not_supportedInvalid file type messageFile not supported
error_max_sizeMaximum size error messageFile size can not exceed 10MB
error_min_sizeMinimum size error messageFile size must be bigger than 1KB
error_genericGeneric error messageInvalid file

Label "string", "variable", "expression" | required | multilanguage
This attribute adds a textlabel to the component.


Description "string", "variable", "expression" | required | multilanguage
This attribute adds a text description to the component.


Text to identify the section of the file "string", "variable", "expression"
The value will be retrieved on the file object so you can identify easily which section it belongs to.


Group of the file at Toqio "string", "variable", "expression"
The value will be retrieved on the file object so you can easily identify which section it belongs to.

If you are using Toqio’s identifiers to upload the document, you can only use the following options as sections of the file:

  • COMPANY_KYB_DOCUMENTS
  • COMPANY_KYC_DOCUMENTS
  • USER_KYC_DOCUMENTS
  • SHAREHOLDER_DOCUMENTS

If you need to add a new section, you can contact the Support Team to request it. You will need to specify the section name and if there is any required identifier for it. Like a “userId” or anything else that will identify the documents of the section.


Customer ID at Toqio "expression"
Identifier of the customer on Toqio for uploading the document.

📘

If the customer ID do not exist, use the base64 common flow.


Merchant ID at Toqio "expression"
Identifier of the merchant in Toqio for uploading the document.

📘

The Merchant ID property is only used for the Merchant's portal (SME platform). If you want to use the component on other platforms, you can omit this field.
However, please note that if the group you are uploading files to requires this parameter, you must add it in the “Document information at Toqio” table property to ensure the file is uploaded correctly.


Document information at Toqio "table"
Identifier(s) of the internal entity where the document will be stored on Toqio.

NameTypeDescription
Name"string", "variable", "expression"Name of the extra parameter to identify the document on Toqio.
Value"string", "variable", "expression"Value of the name to identify the document on Toqio

If you have used the section “USER_KYC_DOCUMENTS” it means you want to retrieve KYC documents for the user, so you will need to send the “userId“ identifier found in the document information table above). The same will happen if you use the “SHAREHOLDER_DOCUMENTS” section text, you will need to send the “shareholderId” identifier from the table.

If more sections are configured and you want a new section with a specific identifier, you can contact our support team to request it. After configuration is complete, you are able to request a new section if required. You can then send the necessary information with the corresponding identifier as per the information table to fetch documents related to it.


Upload icon "ENUM"
Select a custom icon to be added to the uploader. By default, it will render the “upload” icon.


Multiple files upload "boolean"
Boolean to define if the user can upload individual or multiple files at a time. By default, this is set to “true”.


Maximum files "number"
This refers to the maximum number of files that may be uploaded when multiple uploading is enabled. This property will only be shown when “Multiple files upload” is enabled.


Accepted file types "string", "variable", "expression"
Applies to all accepted file types, and should be an array with all the types separated by commas. The uploader only accepts the following types: ['PNG','JPG','HEIC','HEIF','PDF','XML']. By default will be ['PNG','JPG','HEIC','HEIF','PDF']


Maximum file size (bytes) "number"
This can set an upper size limit for uploaded files, which in no case may exceed the default maximum size, which is 1000000 bytes (10MB) for images or 20000000 bytes (20MB) for files. This value may also not be smaller than the “Minimum file size”.


Minimum file size (bytes) "number"
This can set a threshold for uploaded files sizes, which in no case may be smaller than the default size required, which is 1000 bytes (1k). This value may also not be larger than the “Maximum file size”.


Invalid file type message "string", "variable", "expression" | multilanguage
Add an error message to show when an invalid file type has been uploaded.


Maximum size error message "string", "variable", "expression" | multilanguage
Add an error message to show when a file size exceeds the defined maximum size.


Minimum size error message "string", "variable", "expression" | multilanguage
Add an error message to show when a file size is below the defined minimum size.


Generic error message "string", "variable", "expression" | multilanguage
Add a generic error message to show when there has been a problem uploading a file that does not correspond to any of the ones above.


Margin top "number"
Add space equivalent to the number of indicated pixels to the top margin.


Margin bottom "number"
Add space equivalent to the number of indicated pixels to the bottom margin.