File Upload: An empty preview appears when the onDownloadFile event calls options.callback with "error"

[JaneSjs]

User Issue: T15217 - Add error message on the file preview
https://surveyjs.answerdesk.io/internal/ticket/details/T15217

---

Usage Scenario: a File Upload question allows uploading multiple files. However, certain file types are not allowed (*.exe). Therefore, the onUploadFiles function is implemented to upload only valid files. However, if a user tries to upload a single forbidden file, we return from the onUploadFiles function using the options.callback('error') function. In this case, an empty preview appears and all previously uploaded files disappear.

View CodePen

Also, this is what concerns me in the implementation:

• The use of a custom isValid property to display a custom error within the survey.onSettingQuestionErrors funtion. Is there any better way to attach a custom error to a File question?
• I wish to display an error to notify a user that there was an invalid file uploading attempt. However, the survey.onSettingQuestionErrors function is not raised immediately after file upload. It is necessary to set the checkErrorsMode to onValueChanged to activate this function immediately after the File Upload value is changed. It would be great if it would be possible to display a custom file upload error like the Max Size error appears.

[tsv2013]

Now, you can pass an error text as the second argument to the file upload callback:

  var json = {
    showProgressBar: "both",
    logo: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
    "title": "NPS Survey Question",
    "description": "NPS (net promoter score) is a metric used to evaluate customer loyalty and business growth opportunities. To measure NPS, respondents should rate on a scale of 0 to 10 how likely they would recommend your product or service to a friend or colleague. NPS (net promoter score) is a metric used to evaluate customer loyalty and business growth opportunities. To measure NPS, respondents should rate on a scale of 0 to 10 how likely they would recommend your product or service to a friend or colleague. NPS (net promoter score) is a metric used to evaluate customer loyalty and business growth opportunities. To measure NPS, respondents should rate on a scale of 0 to 10 how likely they would recommend your product or service to a friend or colleague. NPS (net promoter score) is a metric used to evaluate customer loyalty and business growth opportunities. To measure NPS, respondents should rate on a scale of 0 to 10 how likely they would recommend your product or service to a friend or colleague.",
    "logoFit": "cover",
    "logoPosition": "left",
    questions: [
      {
        "type": "file",
        "title": "Please upload your files",
        "name": "files",
        "storeDataAsText": false,
        "allowMultiple": true,
        "maxSize": 102400,
        "hideNumber": true,
      },
    ]
  };

  var model = new Survey.Model(json);

  model .onUploadFiles.add((_, options) => {
    const formData = new FormData();
    const validFiles = []; // An object to store valid files

    options.files.forEach((file) => {
      if (file.name.endsWith(".exe")) {
      } else {
        formData.append(file.name, file);
        validFiles.push(file); // Store the valid file with its name as the key
      }
    });
    let formDataEmpty = true;
    for (const _ of formData.entries()) {
      formDataEmpty = false;
      break;
    }
    if (!formDataEmpty) {
      debugger;
      options.callback("success", validFiles.map(function (file) {
        return {
          file: file,
          content: "https://surveyjs.io/Content/Images/design/Logo.svg"
        };
      }));
    } else {
      // Handle the case when there are no valid files in formData
      console.log("No valid files to upload");
      options.callback('error', "No valid files to upload"); // This error will be added to question errors array and shown in UI
    }
  });