How to use validator with type file in surveyJs?

Question

I am trying to validate uploaded documents on my form with surveyJs and typescript using custom validator but the validator is being called after the fileupload i want to validate file type before uploading. API throws an error when unsupported file type is uploaded and validator is not called. how can i validate and show error before that thanks

here is my JSON

{
        "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."
        }]
    }

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);
}

onUploadMethod

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) {
   
  }
}
}

Answer 1

I found the solution to do the validation. to show a custom message in case of unsupported file type can use addError() method.

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) {
    options.question.addError(new Survey.CustomError(e.error.message));
    options.callback('error');
    return;
  }
}

}

here is an working sample : https://plnkr.co/edit/8DSqU2scJ32DXXGP