Add error message on the file preview

Thanks Jane for your replay.
When there are already files on the preview uploading an unvalid file clear the preview.

Hello Mohamed,
Please excuse me but I don't follow. Do you have any demo?

Hi Jane,
I mean that if I upload first a valid file and then try to upload an invalid file the preview get cleared and the first file disappear.

Hi,
If you allow uploading multiple files, you need to implement the survey.onUploadFiles function and handle multiple file uploads. You can access all uploaded files using the options.files parameter. Iterate through files and build a resultant array of files which will be send to a server side storage. Your resultant array of files would contain valid files only. Therefore, you would send options.callback("success", vidFilesArray");additionally, I'd users uploaded invalid files, add a custom error to notify users about that.

Hi Jane,
To be more precise take a look a this sample :https://codepen.io/OUAKIB/pen/zYexRmN
When you try to add an invalid file the file firstfile.txt disappear from the preview. I want to display an error but keep the files already uploaded in the preview.

Hello Mohamed,
Thank you for sharing the demo. Within your onUploadFiles callback, you actually cancel file uploading by calling the options.callback("error"). As a result, no files are uploaded.

JavaScript
survey.onUploadFiles.add((_, options) => {
    const formData = new FormData();
    options.files.forEach((file) => {
        formData.append(file.name, file);
    });

    fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", {
        method: "POST",
        body: formData
    })
        .then((response) => response.json())
        .then((data) => {
              options.callback("error");
              options.question.errors.push(
                 new Survey.CustomError("You tried to upload a forbidden file"));
            /*options.callback(
                "success",
                options.files.map((file) => {
                    return {
                        file: file,
                        content:
                            "https://api.surveyjs.io/private/Surveys/getTempFile?name=" +
                            data[file.name]
                    };
                })
            );*/
        })
        .catch((error) => {
            console.error("Error: ", error);
        });
});

You need to implement the survey.onUploadFiles function to handle your particular usage scenario.
Within the survey.onUploadFiles function:

• Use the options.files parameter to access uploaded files.
• Iterate through files and build a resultant array of valid files only. Use options.callback('success', validFilesArray) to send valid files to a server side storage.
• Additionally, I'd users uploaded invalid files, add a custom error to options.question.errors to notify users that some files are invalid.

I hope this clarifies the situation. Should you have any further questions, please don't hesitate to contact us.

Hello Jane,
I tried to be more precise but I think you didn't get my problem :(
The first time the preview is displayed there is a file already uploaded (included in the starting json):

When I try to upload an invalid file the preview get cleared which not correct.

If I cancel my code and rely on the standard error which is displayed when the uploding file exceeds the maxSize the display is correct:

Hello Mohamed,
Thank you for the clarification. It seems that the onUploadFiles event doesn't receive the file which were initially set to a File question. I may need additional time to consider how to handle this.

Please stay tuned.

Hello Mohamed,
I created the following Knockout demo for your reference: View CodePen. I configured survey.data to preset a file for a File Upload question. Try to upload an additional file and you'll see that both files will be properly displayed.

I hope this demo helps. Please let me know if you have any further questions.

Thanks

Sorry I don't get what you have done the code is the same as before !

The difference is in the onUploadFiles function implementation. You can check how this function is implemented in my demo.

Can you please explain what you have done to resolve my problem described above ?

Hello Mohamed,
Thank you for the update. Here is the code of the survey.onUploadFiles function from the demo you shared earlier in this comment:

JavaScript
survey.onUploadFiles.add((_, options) => {
    const formData = new FormData();
    options.files.forEach((file) => {
        formData.append(file.name, file);
    });

    fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", {
        method: "POST",
        body: formData
    })
        .then((response) => response.json())
        .then((data) => {
              options.callback("error");
              options.question.errors.push(
                 new Survey.CustomError("You tried to upload a forbidden file"));            
        })
        .catch((error) => {
            console.error("Error: ", error);
        });
});

This code doesn't actually upload files anywhere. It simply returns with an error and adds some custom errors to be displayed in UI. However, the main idea of using the onUploadFiles event is to upload files to a server and return the result which would be further saved as a File Upload question's value. Here is how this function is implemented in my demo:

JavaScript
survey.onUploadFiles.add((_, options) => {
    const formData = new FormData();
    options.files.forEach((file) => {
        formData.append(file.name, file);
    });

    fetch("https://api.surveyjs.io/private/Surveys/uploadTempFiles", {
        method: "POST",
        body: formData
    })
        .then((response) => response.json())
        .then((data) => {
            options.callback(
                "success",
                options.files.map((file) => {
                    return {
                        file: file,
                        content:
                            "https://api.surveyjs.io/private/Surveys/getTempFile?name=" +
                            data[file.name]
                    };
                })
            );
        })
        .catch((error) => {
            console.error("Error: ", error);
        });
});

It is a standard Fetch API which sends uploaded files to a server for further processing. Take note of the options.callback("success", <files>) function.

I hope this information helps. Should you have any further questions, please let me know.

Hi Jane,
I'm just giving you a simple example to produce my issue easily. My onUploadFiles function indeed save uploded files to the sever. The code above will not upload any file but at least it must keep the preview with correct information(Displaying existing files) which not the case.

I updated the sample to be more real. I add a control to prevent user from uploading .exe files
When I try to upload an exe file the files already uploaded disappear from the preview.
https://codepen.io/OUAKIB/pen/XWOmmye

Hello Mohamed,
Thank you for the update and a demo. Your usage scenario is clear. I may need some time to consider an option to handle this. Please stay tuned.

Hello Mohamed,
To handle this issue quickly and efficiently, I decided to create the following GitHub issue: https://github.com/surveyjs/survey-library/issues/7242. The ticket contains the updated example. I realized that there is a special survey.onSettingQuestionErrors event to create custom errors for a question. I also updated the onUploadFiles callback function to upload valid files only. Nevertheless, I confirmed that if a user tries to upload a single invalid file and we return from the function using the options.callback('error') function, an empty preview appears.

We'll research this issue and update you as soon as we have any news to share.

Thank you

Hi Jane,
If I replace:

Code
if (question.koHasValue()) {
    return question.value;
} else {
    return [];
}

with :

Code
return question.value ? question.value : [];

in the file preview register function, the problem of empty preview get resolved.
Still a problem when I upload in the same time a valid file and an invalid file. I want to add the valid file to the list and display an error.

Hello Mohamed,
Thank you for the update. While working on this task, I discovered additional issues/questions. We are currently working on this task. Please stay tuned.

Hi Jane,
Is there a case opened for this issue ?
Thanks.

Hello Mohamed,
Thank you for the update. Yes, here is a link: File Question - An empty preview appears when the onDownloadFiles event returns with the options.callback('error'). We've already fixed this issue. The fix will be available with the next maintenance update. If everything goes according to plan, the next version will be available in a day or so.

With the update, you'll be able to notify users about an invalid file upload and specify the error message within the options.callback function: options.callback('error', 'Your Error Message Here').

Thanks

Hello Mohamed,
I updated the following demo to demonstrate how to prevent *.exe files from being uploaded: View CodePen.

Please feel free to contact us if you have any further questions.

Thanks

Hi Jane,
Thanks for your reply.
That solves only part of my request.
I want that when I try to upload two files one is valid and the other is not valid I want that the first one be uploaded successfuly and added to the preview and in the same time display an error for the second file. Is that possible ?
Thank you.

Hello Mohamed,
Thank you for the update. When a user uploads an invalid file, we send the options.callback('error', 'Error message'). It seems that it is impossible to send a valid file using the options.callback('success', validFiles) at the same time. I'll discuss this task with our developers. Please stay tuned.

Thank you Jane.
It will also be great if we can display multiline error.

Hello Mohamed,
Thank you for the update. I discussed this usage scenario with the team. Unfortunately, the survey.onUploadFiles function doesn't currently allow to handle this usage scenario and upload valid files and display an error to inform users about an invalid file upload attempt. We will consider extending our API to handle this usage scenario. You can track out progress in the following GitHub thread: https://github.com/surveyjs/survey-library/issues/7314.

Thank you for sharing your usage scenario. Please look forward to our updates.