The Attachment Widget is a configurable component used to upload and validate files within a form or service application.
This widget allows users to upload documents or images with customizable rules such as file size limits, allowed formats, and validation checks. It can also support advanced validation for structured files like Excel (e.g., uniqueness, required fields, length constraints). The widget ensures that uploaded files meet specific service requirements before submission, making it suitable for use cases like identity verification, supporting documents, or structured data attachments.
Complete JSON Object
{
"key":"InputKey",
"type":"customfileupload",
"props":{
"required":true,
"label":"Birth Certificate",
"minmumUploadSize":100,
"maximumUploadSize":400,
"allowedFormats":[
"png","jpg"
],
"validatePhoto":true,
"attachmentCode":"test_attachment_code"
},
"validation":{
"messages":{
"required":"Birth Certificate is required",
"invalidfileformat":"Invalid file format only PNG and JPG is allowed",
"minuploadsize":"Minimun upload size is 100kb",
"maxuploadsize":"Maximum upload size is 400kb"
}
}
}
Allowed Custom Properties
Allowed Validations
validator-(n)
Excel Attachment validations
In the props of the attachment json, add new property called validations which is an array of objects, for each object we have different members depending on a validation needed for that attachment! For UNIQUE and REQUIRED types we only need type, column, and message where as for LENGTH validation type we add maxLength, or minLength or both if need be.
For UNIQUEand LENGTH validation types we have optional member called startIndex which is a number, this helps when your document has special design and you would like to specify which index row the validation should start from in a document. If this is not added in the validation configuration we use default startIndex which is 0.
There are few things to keep in mind when counting or getting index to use in these validation configs, the index should start from 0(this means if you want to validate first column or row, you should use 0) and also columns or rows that do not have data should be skipped(should not be counted or put in consideration).
N.B: the column can either be the column name in the file or be the index of that column in the file.
Below is a json example of how to add in the json config of the attachment:
{
key: 'PLANS_FOR_EACH_FLOOR',
type: 'customfileupload',
props: {
label:
'Plans for each floor, perspective and site layout',
tooltip: '',
disabled: false,
readonly: false,
required: true,
placeholder: '',
allowedFormats: ['xlsx', 'xls'],
validations: [
{
type: 'UNIQUE',
column: 'National ID',
message: 'NID must be a unique record',
},
{
type: 'LENGTH',
column: 'National ID',
message: 'Inavlid max or minimum length',
maxLength: 16,
minLength: 16,
},
{
type: 'REQUIRED',
column: 'Ownwer Names',
message: 'Owner names column is required',
},
],
},
validation: {
messages: {
required: 'This attachment is required',
maximumUploadSize:
'Maximum upload size exceeded',
minimumUploadSize:
'Minimum upload size not met',
invalidfileformat: 'File format not allowed',
},
},
expressions: {},
defaultValue: null,
expressionProperties: {},
},