Is there a way to validate uploaded documents on a form using surveyJs and typescript with a custom validator before the file is uploaded? The current issue I am facing is that the validator gets called after the upload, resulting in an API error for unsupported file types. How can I ensure validation and display errors before the uploading process? Any help would be appreciated.
Below is the JSON snippet:
{
"name": "document",
"type": "file",
"title": {
"zh-cn": "6. 商业登记证",
"zh-tw": "6. 商業登記證",
"default": "6. Business registration certificate"
},
"maxSize": 10485760,
"isRequired": true,
"description": "{ \"type\": \"url\", \"label\": { \"default\": \"What does it look like?\", \"zh-cn\": \"这个文件是什么？\", \"zh-tw\": \"這個文件是什麼？\" }, \"value\": \"/assets/images/sample_BR.jpg\" }",
"acceptedTypes": ".pdf, .jpg, .png",
"requiredErrorText": {
"zh-cn": "请上传有效的公司商业登记证",
"zh-tw": "請上傳有效的公司商業登記證",
"default": "Please upload valid business registration certificate"
},
"allowImagesPreview": false,
"descriptionLocation": "underInput",
"validators": [{
"type": "expression",
"expression": "isJpgPngOrPdfFile({document}) == true",
"text": "Invalid file format, please upload your document in png, jpeg or pdf format."
}]
}
Related TypeScript code:
Survey.FunctionFactory.Instance.register('isJpgPngOrPdfFile', this.isJpgPngOrPdfFile);
isJpgPngOrPdfFile(documents) {
console.log(typeof documents + ':' + documents);
if (documents.length < 1) return false;
var fileValue = documents[0];
var checkFile = function(file) {
return (
!file ||
!file.name ||
file.name.toLowerCase().endsWith('.png') ||
file.name.toLowerCase().endsWith('.jpg') ||
file.name.toLowerCase().endsWith('.pdf') ||
file.name.toLowerCase().endsWith('.jpeg')
);
};
if (Array.isArray(fileValue)) {
return fileValue.every(checkFile);
}
return checkFile(fileValue);
}
Snippet from onUploadMethod function:
async onFileUpload(s, options) {
if (options.files && options.files.length) {
const file = options.files[0];
try {
const data: any = await this.authService.uploadFile(file.name, file, file.type);
options.callback(
'success',
options.files.map((item: File) => {
return {
file: item,
content: data.code
};
})
);
const aTags = document.querySelectorAll(`[href='${data.code}']`);
if (aTags.length) {
(aTags[0] as HTMLAnchorElement).href = data.documentUrl;
(aTags[0] as HTMLAnchorElement).innerHTML = data.name;
(aTags[0] as HTMLAnchorElement).target = '_blank';
}
} catch (e) {
}
}
}