File name regex validation

salaiviswa

created 4 years ago (modified 4 years ago)

In my angular app, when user tries to upload file using file widget or in matrix widget, I want to enforce a validation on file name by applying my regex so that it should only allow files matching with the pattern, else it should throw an error message. I am facing challenge on how to do this check in angular app. I understood so far is that I need to write something like below in my survey.component.ts

Code
surveyModel.onUploadFiles.add((survey, options) => {
      const question = survey.getQuestionByName(options.name);
       options.files.forEach(file => {
         // check my file name is against my regex and accept only if it matches, else throw error.
       })
    })

I am not sure how to write custom regex validator and do check here. Any help much appreciated! Thanks.

Answers approved by surveyjs Support

Serge T

created 4 years ago

Hello,

You can check the file.name against your regexp and whether to upload a file or skip it.

Thanks, Serge
SurveyJS Team

Show previous comments (4)

salaiviswa 4 years ago

Hi Serge,

I tried the following logic. I still see that my regex is not validated and its always getting through even for invalid format. Can you tell me where i am going wrong here?

TypeScript
options.files.forEach(file => {
       var expression = '/[a-zA-Z0-9 @&#]/g';
       var regExp = new Survey.RegexValidator(expression);
       var result = regExp.validate(file.name);
       if (result.error.text !== '') {
         alert('The file name is invalid' + result.error.text);
         return;
       } else {
         alert('success');
       }
      });

If I try to upload a file name as INval~id.txt, I would expect to see an error alert because it contains ~ (tilde) symbol. But, it is getting succeeded.

Serge T 4 years ago

Hello,

You needn't use the Survey.RegexValidator here. You can do it via ordinary JavaScript as described in corresponding articles - https://html.form.guide/snippets/javascript-form-validation-using-regular-expression/

Thanks, Serge
SurveyJS Team

salaiviswa 4 years ago

Thanks Serge. Thats fine then. I will use that based on that.

salaiviswa 4 years ago

Hi Serge,

I have managed to validate regEx. Can you tell me how to show the error message if user tries to upload invalid file name in UI.

Code
if (options.files) {
        options.files.forEach(file => {
        // Assume the below method does validation
          if (!isValidFileName(file.Name, expression)) {
            options.error = FILENAME_VALIDAION_ERROR_MSG;
          }
        });
      }

I tried the code in both onValidateQuestion and onUploadFiles.

This will not show error in UI, rather it just passes. Can you suggest how to restrict user to move further until the error sorted out?

Regards,
Viswa V.

Serge T 4 years ago

Hello,

Here is the working plunker - https://plnkr.co/edit/Y94EIGByf42VBayX

It sets the errors property of a question:

JavaScript
survey
    .onUploadFiles
    .add(function (survey, options) {
        var formData = new FormData();
        var errors = [];
        options
            .files
            .forEach(function (file) {
                formData.append(file.name, file);
                errors.push(new Survey.CustomError("Too biiiiiig file"));
            });
        if(errors.length > 0) {
            options.question.errors = errors;
            options.callback("error", errors);
        } else {
            options.callback("success", options.files.map(function (file) {
                return {
                    file: file,
                    content: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
                };
            }));
        }
    });

Thanks, Serge
SurveyJS Team

salaiviswa 4 years ago

Awesome. This works like a Charm! One more question. is there a way that I can show error message using html format or we don't have provision to show messages in desired html formats like below?

The file name is invalid. please use below characters only

Uppercase
Lowercase
Numbers

Serge T 4 years ago

Hello,

I created a separate ticket on your behalf: T7967: Is there a way that I can show error message using html format?. We placed it in our processing queue and will process it shortly.

Thanks, Serge
SurveyJS Team

File name regex validation

Answers approved by surveyjs Support

Recently viewed tickets