kendo-fileselect: How to remove file vom values

[Harald]

Following code (shortened for simplicity):

<kendo-fileselect
  id="files"
  formControlName="files"
  [restrictions]="this.fileRestrictions"
  (select)="onFileSelect($event)">
  <ng-template kendoFileSelectFileInfoTemplate let-files>
---- shows name and validationerrors ----
  </ng-template>
</kendo-fileselect>

  async onFileSelect(ev: SelectEvent) {
    ev.files.forEach(currentFile => {
      if (currentFile.rawFile) {
        this.readFile(currentFile.rawFile).then(content => {
            let attachment = (<AttachmentModel>{filename: currentFile.name, content: content});
            this.attachmentClient.isValid(attachment, this.tenant).subscribe(
              isValid => {
                if (!isValid) {
                  currentFile.validationErrors = currentFile.validationErrors ?? [];
                  currentFile.validationErrors.push("malwareFound");
                } } ); } ); }  });  }

Explaination: I'm checking for malware here (via this.attachmentClient.isValid on server-side).

My problem: It shows the validationerror, but still adds the file to value of the control. For example it doesn't add a file with a wrong extension (restricted via kendo-fileselect restrictions) How can I set my malware-file to not end up in value? I've tried ev.preventDefault(), but this removes the file completely from the list (and I don't see the validationerror)

Screenshot:

- first file: not allowed filetype -> is not in value of control

- second file: malware -> is still in value of control

 

Regards

[Stefani]

Hi Harald,

Thank you for the shared details and code snippets.Indeed, the behavior you are describing is the intended way the FileSelect component is expected to work.

Fortunately, in order to fit the specifics of the desired behavior, I'm able to offer the following workaround:

1. As implemented in the provided code, handle the `select` event and execute the needed malware validation

2. If the file has malware, prevent the event so that the file is not added to the component's value

3. Manually add the file's info the the file list so that it still appears in the list, but is not part of the value itself

this.fileselect.fileList.add({
    name: 'Test file',
    validationErrors: ['invalidFileExtension'],
});

* Please keep in mind that for this workaround I have utilized the `fileList` property of the FileSelect component which is not part of the component's public API and should be used at your discretion.

If you need to customize the validation message, please refer to the Globalization article in our documentation.

Here's a StackBlitz demo that showcases the above approach: https://stackblitz.com/edit/angular-mbh9bw

I hope this points you in the right direction.

Regards,
Stefani
Progress Telerik

[Harald]

Thanks for the fast answer, I have one problem though: I'm using promises in angular and my malwarecheck returns the value asynchonously (in the meantime my application is locked to go to the next step, but I may go back, add other files in the meantimne, ...). So my currentFile.validationErrors.push("malwareFound") from the snippet above would be executed later (I can't do a preventDefault at this point and if I do it at the outer scope I would prevent all files malware or not, since the check is in progress).

Isn't there a possibility to remove the item from value afterwards (after the malware check returns asynchronously)?

For now I have a solution, it's a little bit hacky (I'm storing malware-files in an array and instead of using the value of kendo-fileselect directly I'm using values minus this list). But I would really like to know if there is a better solution.

 

Regards

[Yanmario]

Hi Harald,

Some hacky workaround might be needed in specific use case scenarios, and what I could further suggest is an approach to remove the files depending on the malware check and response. The following example simulates a 50/50 chance for validity and removing the non-valid files:

https://stackblitz.com/edit/angular-mbh9bw-ykqs9g?file=src%2Fapp%2Fapp.component.ts

This approach won't prevent the event, but it does look kinda strange when removing the selected file and some warring message or notification might be proper to be added.

I hope the provided example, provides some additional help in your scenario.

Regards,
Yanmario
Progress Telerik